/*
 * Home page sections — calm, modern hybrid layout.
 *
 * Section flow (visual hierarchy):
 *   1. Hero            — full-bleed muted video playlist, calm message + clear CTAs
 *   2. Support strip   — phone, online remembrance booking and feedback
 *   3. Services        — 3 core services, equal grid, clear "Дэлгэрэнгүй →" links
 *   4. Process         — 4-step "Хэрхэн ажилладаг вэ" timeline (UX clarity)
 *   5. FAQ             — practical answers before the company introduction
 *   6. Eregelt         — featured remembrance service (split image + text)
 *   7. About           — image + concise introduction
 *   8. Partners        — horizontal logo row
 *   9. Testimonials    — readable cards with full-text disclosure
 */

/* ============================================================
   HERO — full-bleed, dark gradient over a muted video playlist.
   ============================================================ */
.ub-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100svh - var(--ub-header-height));
    display: flex;
    align-items: center;
    color: var(--ub-color-on-brand);
}

.ub-hero__media {
    position: absolute;
    inset: 0;
    background-color: var(--ub-color-heading);
}

.ub-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Видеог илүү харуулахын тулд зөөлрүүлсэн scrim (эзний хүсэлт 2026-10-02):
   бичвэр зүүн/доод талд тул тэнд харьцангуй бараан хэвээр, баруун/дээд тал тод.
   Хамгийн тод видеон дээр ч гарчгийн ард дундаж contrast ≥ 3.5:1, lede ≥ 4.5:1. */
.ub-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(14, 16, 18, 0.64) 0%,
            rgba(14, 16, 18, 0.56) 38%,
            rgba(14, 16, 18, 0.30) 68%,
            rgba(14, 16, 18, 0.38) 100%),
        linear-gradient(180deg,
            rgba(14, 16, 18, 0.26) 0%,
            rgba(14, 16, 18, 0.12) 45%,
            rgba(14, 16, 18, 0.58) 100%);
}

/* Mobile-д бичвэр бүтэн өргөнөөр байрладаг тул хөндлөн gradient баруун тийш
   уналгүй жигд байна — урт мөрийн төгсгөл тод видеон дээр унших боломжтой. */
@media (max-width: 767px) {
    .ub-hero__media::after {
        background:
            linear-gradient(90deg,
                rgba(14, 16, 18, 0.60) 0%,
                rgba(14, 16, 18, 0.52) 100%),
            linear-gradient(180deg,
                rgba(14, 16, 18, 0.26) 0%,
                rgba(14, 16, 18, 0.12) 45%,
                rgba(14, 16, 18, 0.58) 100%);
    }
}

.ub-hero__layout {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--ub-container-wide);
    margin-inline: auto;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 40px);
}

.ub-hero__content {
    min-width: 0;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ub-space-2xl);
}

/* Display the three circles from the unchanged 1080px source artwork.
   Each badge is 310px square at y=149, with x=4 / 352 / 700. */
.ub-hero__certifications {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ub-space-xl);
    width: min(100%, 296px);
    padding: 0;
    margin: 0;
    list-style: none;
}

.ub-hero__certification {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-color-page-bg);
}

.ub-hero__certifications .ub-hero__certification img {
    position: absolute;
    width: calc(100% * 1080 / 310);
    max-width: none;
    height: auto;
    top: calc(-100% * 149 / 310);
    left: calc(-100% * 4 / 310);
}

.ub-hero__certification:nth-child(2) img {
    left: calc(-100% * 352 / 310);
}

.ub-hero__certification:nth-child(3) img {
    left: calc(-100% * 700 / 310);
}

@media (max-width: 767px) {
    .ub-hero__certifications {
        width: min(100%, 240px);
        gap: var(--ub-space-l);
    }
}

.ub-hero__video-control {
    position: absolute;
    right: clamp(var(--ub-space-xl), 4vw, var(--ub-space-5xl));
    bottom: var(--ub-space-2xl);
    z-index: 2;
    white-space: nowrap;
}

.ub-hero__video-control[hidden] {
    display: none;
}

.ub-hero__eyebrow {
    font-size: var(--ub-text-xs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ub-color-on-brand);
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    opacity: 0.92;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.ub-hero__headline {
    font-family: var(--ub-font-display);
    font-size: clamp(2.125rem, 5.2vw, 3.75rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: var(--ub-tracking-display);
    color: var(--ub-color-on-brand);
    max-width: 18ch;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.42);
}

.ub-hero__lede {
    font-size: clamp(var(--ub-text-md), 1.6vw, var(--ub-text-xl));
    line-height: var(--ub-leading-body);
    color: rgba(255, 255, 255, 0.92);
    max-width: 56ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.ub-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-l);
    margin-top: var(--ub-space-l);
}

.ub-hero__pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-color-success-state);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: ub-hero-pulse 2.4s ease-out infinite;
}

@keyframes ub-hero-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ============================================================
   SUPPORT STRIP — phone, remembrance booking and feedback after hero.
   ============================================================ */
.ub-support {
    background-color: var(--ub-color-section-bg);
    border-bottom: 1px solid var(--ub-color-divider);
}

.ub-support__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: var(--ub-container-wide);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
}

@media (min-width: 768px) {
    .ub-support__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ub-support__tile {
    display: flex;
    align-items: center;
    gap: var(--ub-space-xl);
    padding: var(--ub-space-2xl) var(--ub-space-xl);
    border-bottom: 1px solid var(--ub-color-divider);
    transition: background-color var(--ub-transition-fast);
}

.ub-support__tile:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .ub-support__tile {
        border-bottom: none;
        border-right: 1px solid var(--ub-color-divider);
    }
    .ub-support__tile:last-child {
        border-right: none;
    }
}

.ub-support__tile:hover {
    background-color: var(--ub-color-section-soft);
}

.ub-support__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-color-hover-tint);
    color: var(--ub-color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ub-support__icon svg {
    width: 20px;
    height: 20px;
}

.ub-support__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ub-support__label {
    font-size: var(--ub-text-xs);
    font-weight: 600;
    color: var(--ub-color-body-muted);
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
}

.ub-support__value {
    font-size: var(--ub-text-md);
    font-weight: 500;
    color: var(--ub-color-heading);
    line-height: 1.4;
}

/* ============================================================
   SECTION SCAFFOLDING — generic spacing helpers used by all
   home sections so each one is internally consistent.
   ============================================================ */
.ub-section__head {
    margin-bottom: clamp(40px, 5vw, 72px);
}

.ub-partners,
.ub-testimonials,
.ub-faq-section {
    padding-block: clamp(56px, 7vw, 96px);
}

.ub-partners .ub-section__head,
.ub-testimonials .ub-section__head,
.ub-faq-section .ub-section__head {
    margin-bottom: clamp(28px, 4vw, 48px);
}

/* ============================================================
   SERVICES — 3 core service cards, equal width.
   ============================================================ */
.ub-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ub-space-2xl);
}

@media (min-width: 768px) {
    .ub-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ub-services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ub-services__card {
    background-color: var(--ub-color-section-soft);
    border-radius: var(--ub-radius-md);
    padding: clamp(28px, 3.4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-xl);
    transition: transform var(--ub-transition-base),
                box-shadow var(--ub-transition-base);
}

.ub-services__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ub-shadow-card-hover);
}

.ub-services__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    align-self: center;
    margin-bottom: var(--ub-space-l);
}

.ub-services__title {
    font-family: var(--ub-font-display);
    font-size: var(--ub-text-2xl);
    font-weight: 600;
    color: var(--ub-color-heading);
    line-height: var(--ub-leading-display);
    letter-spacing: var(--ub-tracking-display);
    text-align: center;
}

.ub-services__text {
    font-size: var(--ub-text-md);
    color: var(--ub-color-body);
    line-height: var(--ub-leading-body);
    flex: 1;
}

.ub-services__cta {
    margin-top: var(--ub-space-s);
    min-height: var(--ub-size-touch-target);
    padding-block: var(--ub-space-l);
}

/* ============================================================
   PROCESS — 4-step "Хэрхэн ажилладаг вэ" timeline.
   ============================================================ */
.ub-process {
    background-color: var(--ub-color-section-soft);
    padding-block: clamp(var(--ub-space-5xl), 5vw, var(--ub-space-7xl));
}

.ub-process .ub-section__head {
    margin-bottom: var(--ub-space-4xl);
}

.ub-process__grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--ub-space-5xl);
    row-gap: var(--ub-space-3xl);
    counter-reset: ub-step;
}

@media (min-width: 768px) {
    .ub-process__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ub-process__grid {
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--ub-space-6xl);
        row-gap: var(--ub-space-5xl);
    }
}

.ub-step {
    counter-increment: ub-step;
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-l);
    position: relative;
    padding-top: var(--ub-space-2xl);
}

.ub-step::before {
    content: "0" counter(ub-step);
    font-family: var(--ub-font-display);
    font-size: var(--ub-text-xl);
    font-weight: 600;
    color: var(--ub-color-brand);
    letter-spacing: 0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ub-step::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--ub-color-brand);
}

.ub-step__title {
    font-family: var(--ub-font-display);
    font-size: var(--ub-text-xl);
    font-weight: 600;
    color: var(--ub-color-heading);
    line-height: var(--ub-leading-display);
    letter-spacing: var(--ub-tracking-display);
}

.ub-step__text {
    font-size: var(--ub-text-md);
    color: var(--ub-color-body);
    line-height: var(--ub-leading-body);
}

.ub-faq-section__contact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ub-space-xl) var(--ub-space-3xl);
    margin-top: calc(-1 * var(--ub-space-xl));
    margin-bottom: var(--ub-space-2xl);
}

.ub-faq-section__contact .ub-btn {
    min-height: var(--ub-size-touch-target);
    padding-block: var(--ub-space-l);
    color: var(--ub-color-heading);
}

/* ============================================================
   EREGELT — featured remembrance service (split panel).
   ============================================================ */
.ub-eregelt__split {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--ub-radius-lg);
    overflow: hidden;
    background-color: var(--ub-color-section-soft);
}

@media (min-width: 768px) {
    .ub-eregelt__split {
        grid-template-columns: 1fr 1fr;
    }
}

.ub-eregelt__panel {
    padding: clamp(32px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ub-space-xl);
    min-height: 420px;
}

.ub-eregelt__icon {
    width: 56px;
    height: 56px;
    align-self: center;
    margin-bottom: var(--ub-space-s);
}

.ub-eregelt__title {
    font-family: var(--ub-font-display);
    font-size: clamp(1.5rem, 3.4vw, var(--ub-text-3xl));
    font-weight: 600;
    color: var(--ub-color-heading);
    line-height: var(--ub-leading-display);
    letter-spacing: var(--ub-tracking-display);
}

.ub-eregelt__text {
    font-size: var(--ub-text-md);
    color: var(--ub-color-body);
    line-height: var(--ub-leading-body);
}

.ub-eregelt__cta {
    margin-top: var(--ub-space-s);
    align-self: flex-start;
}

.ub-eregelt__image {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 320px;
    background-color: var(--ub-color-heading);
}

/* ============================================================
   ABOUT — centered heading, uncropped team photograph and inline introduction.
   ============================================================ */
.ub-about {
    padding-block: calc(2 * var(--ub-space-2xl));
}

.ub-about .ub-section__head {
    margin-bottom: calc(2 * var(--ub-space-2xl));
}

.ub-about .ub-lotus-heading__title {
    overflow-wrap: anywhere;
}

.ub-about__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto 5 / 2;
    border-radius: var(--ub-radius-lg);
}

.ub-about__text {
    margin-top: var(--ub-space-2xl);
    font-size: var(--ub-text-md);
    color: var(--ub-color-body);
    line-height: var(--ub-leading-body);
    overflow-wrap: anywhere;
}

.ub-about__more {
    color: var(--ub-color-primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    white-space: nowrap;
}

.ub-about__more:hover {
    color: var(--ub-color-primary-hover);
}

@media (max-width: 767px) {
    /* The remembrance panel above ends in a full-bleed photo, so the default
       72px section padding plus the About padding read as an empty band
       around the heading on phones. Tighten both sides so the heading sits
       with its own photo instead of floating between two images. */
    .ub-eregelt {
        padding-block: var(--ub-space-5xl);
    }

    .ub-about {
        padding-block: var(--ub-space-xl) var(--ub-space-3xl);
    }

    .ub-about .ub-section__head {
        margin-bottom: var(--ub-space-2xl);
    }

    .ub-about__image {
        border-radius: var(--ub-radius-md);
    }
}

/* ============================================================
   PARTNERS — infinite-scroll marquee.
   ============================================================
   Logos render twice in one track and translateX(-50%) loops
   seamlessly; an edge mask softens the wrap point and the
   animation pauses on hover/focus for accessibility.
*/
.ub-partners__marquee {
    position: relative;
    overflow: hidden;
    /* Soft edge fade — also hides any sub-pixel seam at the loop point. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--ub-color-black) 6%, var(--ub-color-black) 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, var(--ub-color-black) 6%, var(--ub-color-black) 94%, transparent 100%);
}

.ub-partners__track {
    display: flex;
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
    width: max-content;
    animation: ub-partners-scroll 32s linear infinite;
}

.ub-partners__marquee:hover .ub-partners__track,
.ub-partners__marquee:focus-within .ub-partners__track {
    animation-play-state: paused;
}

@keyframes ub-partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ub-partners__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    flex: 0 0 auto;
}

.ub-partners__logo {
    height: 100%;
    max-height: 76px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter var(--ub-transition-base),
                opacity var(--ub-transition-base);
}

.ub-partners__item:hover .ub-partners__logo {
    filter: grayscale(0);
    opacity: 1;
}

.ub-partners__cta {
    text-align: center;
    margin-top: clamp(40px, 5vw, 64px);
}

/* Reduced-motion users see the static wrapped grid (the original
   layout) and the marquee animation is disabled. */
@media (prefers-reduced-motion: reduce) {
    .ub-partners__marquee {
        -webkit-mask-image: none;
                mask-image: none;
    }
    .ub-partners__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 1100px;
        margin-inline: auto;
        gap: clamp(32px, 4vw, 64px) clamp(40px, 5vw, 72px);
    }

    .ub-partners__item[aria-hidden="true"] {
        display: none;
    }
}

/* ============================================================
   TESTIMONIALS — whole-card carousel with native full-text disclosure.
   ============================================================
   testimonial_slider_controller.js — хулганаар хоёр тийш чирж гүйлгэнэ
   (`.is-dragging`). Хүрэлцэх төхөөрөмжид төрөлх (native) гүйлгэлт; гар
   (keyboard)-д viewport tabindex=0 → сум товч/сумаар гүйлгэнэ. JS байхгүй
   бол ч viewport нь хэвтээ scroll болж контент бүтэн хүрэхүйц үлдэнэ. */
.ub-testimonials__slider {
    --ub-testimonials-columns: 1;
    --ub-testimonials-gap: clamp(16px, 2.4vw, 32px);
    --ub-testimonials-decor-size: var(--ub-size-icon-chip-sm);
    position: relative;
}

/* Хоёр хээ картын бүлгийн захад бүтнээр харагдана. */
.ub-testimonials__decor {
    position: absolute;
    width: var(--ub-testimonials-decor-size);
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.ub-testimonials__decor--start {
    top: 0;
    left: 0;
}

.ub-testimonials__decor--end {
    bottom: calc(-1 * (var(--ub-size-touch-target) + var(--ub-space-xl)));
    right: 0;
}

.ub-testimonials__stage {
    position: relative;
    padding-top: calc(var(--ub-testimonials-decor-size) + var(--ub-space-s));
}

@media (min-width: 768px) {
    .ub-testimonials__slider {
        --ub-testimonials-columns: 2;
        --ub-testimonials-decor-size: clamp(var(--ub-space-6xl), 10vw, calc(2 * var(--ub-space-7xl)));
    }

    .ub-testimonials__stage {
        padding-block: 0;
        padding-inline: calc(var(--ub-testimonials-decor-size) + var(--ub-space-xl));
    }

    .ub-testimonials__decor--start {
        top: var(--ub-space-l);
    }

    .ub-testimonials__decor--end {
        bottom: var(--ub-space-l);
    }
}

@media (min-width: 1280px) {
    .ub-testimonials__slider {
        --ub-testimonials-columns: 3;
    }
}

.ub-testimonials__viewport {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;            /* Firefox — scrollbar нуух */
    -webkit-overflow-scrolling: touch;
    padding-block: var(--ub-space-s);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
}

.ub-testimonials__viewport::-webkit-scrollbar {
    display: none;                    /* WebKit — scrollbar нуух */
}

.ub-testimonials__slider.is-enhanced .ub-testimonials__viewport {
    cursor: grab;
}

.ub-testimonials__viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.ub-testimonials__viewport:focus-visible {
    outline: 2px solid var(--ub-color-brand);
    outline-offset: 4px;
    border-radius: var(--ub-radius-md);
}

.ub-testimonials__track {
    display: flex;
    align-items: flex-start;
    gap: var(--ub-testimonials-gap);
    width: 100%;
    padding-inline: 2px;
}

.ub-testimonials__track > .ub-testimonial {
    flex: 0 0 calc((100% - (var(--ub-testimonials-columns) - 1) * var(--ub-testimonials-gap)) / var(--ub-testimonials-columns));
    scroll-snap-align: start;
    box-shadow: var(--ub-shadow-card);
}

.ub-testimonials__track > .ub-testimonial:hover {
    box-shadow: var(--ub-shadow-card-hover);
}

/* Mobile cards share an aligned start; wider layouts retain a gentle stagger. */
@media (min-width: 768px) {
    .ub-testimonials__track > .ub-testimonial:nth-child(4n+2) { margin-top: var(--ub-space-2xl); }
    .ub-testimonials__track > .ub-testimonial:nth-child(4n+3) { margin-top: var(--ub-space-l); }
    .ub-testimonials__track > .ub-testimonial:nth-child(4n+4) { margin-top: var(--ub-space-3xl); }
}

/* Ээлжилсэн дэвсгэр өнгө. */
.ub-testimonials__track > .ub-testimonial:nth-child(even) {
    background-color: var(--ub-color-section-cool);
}

/* --- Сумны удирдлага — зөвхөн JS идэвхтэй үед --- */
.ub-testimonials__controls {
    display: none;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    gap: var(--ub-space-l);
    margin-top: var(--ub-space-xl);
}

.ub-testimonials__slider.is-enhanced .ub-testimonials__controls {
    display: flex;
}

.ub-testimonials__arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-pill);
    background: var(--ub-color-page-bg);
    color: var(--ub-color-heading);
    cursor: pointer;
    transition: background-color var(--ub-transition-fast),
                border-color var(--ub-transition-fast),
                color var(--ub-transition-fast);
}

.ub-testimonials__arrow:hover {
    background: var(--ub-color-hover-tint);
    border-color: var(--ub-color-brand);
    color: var(--ub-color-brand);
}

.ub-testimonials__arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ub-testimonials__arrow:disabled:hover {
    background: var(--ub-color-page-bg);
    border-color: var(--ub-color-divider);
    color: var(--ub-color-heading);
}

.ub-testimonials__arrow:focus-visible {
    outline: 2px solid var(--ub-color-brand);
    outline-offset: 2px;
}

.ub-testimonial {
    min-height: 320px;
    background-color: var(--ub-color-testimonial-bg);
    border-radius: var(--ub-radius-md);
    padding: clamp(var(--ub-space-2xl), 3vw, var(--ub-space-5xl));
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-l);
    transition: transform var(--ub-transition-base),
                box-shadow var(--ub-transition-base);
}

.ub-testimonial:hover {
    transform: translateY(-2px);
}

/* Кавычка тэмдэг — карт дээр тогтмол (ишлэл гүйхэд хамт гүйхгүй). */
.ub-testimonial__mark {
    flex: 0 0 auto;
    font-size: 2.4em;
    line-height: 0.5;
    color: var(--ub-color-brand);
}

.ub-testimonial__quote {
    font-size: var(--ub-text-lg);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--ub-color-heading);
    overflow-wrap: anywhere;
}

.ub-testimonial__preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    min-height: 6.2em;
    overflow: hidden;
}

.ub-testimonial:has(.ub-testimonial__reading[open]) .ub-testimonial__preview {
    display: none;
}

.ub-testimonial__summary {
    min-height: var(--ub-size-touch-target);
    justify-content: flex-start;
    text-align: left;
    list-style: none;
}

.ub-testimonial__summary::-webkit-details-marker {
    display: none;
}

.ub-testimonial__read-less,
.ub-testimonial__reading[open] .ub-testimonial__read-more {
    display: none;
}

.ub-testimonial__reading[open] .ub-testimonial__read-less {
    display: inline;
}

.ub-testimonial__full-quote {
    margin-top: var(--ub-space-l);
}

.ub-testimonial__author {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ub-space-l);
    margin-top: auto;
    padding-top: var(--ub-space-s);
}

.ub-testimonial__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--ub-radius-pill);
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--ub-color-divider);
}

/* Зурaггүй сэтгэгдэлд нэрний эхний үсгийг дугуйд төвлүүлж харуулна. */
.ub-testimonial__avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ub-text-md);
    font-weight: 600;
    color: var(--ub-color-heading);
    text-transform: uppercase;
}

.ub-testimonial__name {
    font-size: var(--ub-text-md);
    font-weight: 500;
    color: var(--ub-color-heading);
    line-height: 1.2;
}

/* ============================================================
   HERO ASSURANCE + MOBILE QUICK ACTIONS — clearer next steps.
   ============================================================ */
.ub-hero__assurance {
    width: min(100%, 720px);
    margin-top: var(--ub-space-xl);
    padding: clamp(var(--ub-space-xl), 2vw, var(--ub-space-2xl));
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: var(--ub-radius-lg);
    background: rgba(14, 16, 18, 0.34);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ub-hero__proof {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ub-space-2xl);
    margin: 0;
    padding-top: 0;
}

.ub-hero__proof li {
    display: flex;
    align-items: baseline;
    gap: var(--ub-space-s);
    min-width: 0;
}

.ub-hero__proof strong {
    font-size: clamp(var(--ub-text-xl), 3vw, var(--ub-text-3xl));
    font-weight: 600;
    line-height: 1.08;
    color: var(--ub-color-on-brand);
    font-variant-numeric: tabular-nums;
}

.ub-hero__proof span {
    font-size: var(--ub-text-sm);
    line-height: var(--ub-leading-snug);
    color: rgba(255, 255, 255, 0.82);
}

.ub-sticky-actions {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: calc(var(--ub-z-header) - 1);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ub-space-s);
    padding: var(--ub-space-s);
    border: 1px solid rgba(231, 231, 234, 0.9);
    border-radius: var(--ub-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ub-shadow-elevated);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.ub-sticky-actions__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ub-space-s);
    min-height: 48px;
    padding-inline: var(--ub-space-l);
    border-radius: var(--ub-radius-pill);
    color: var(--ub-color-heading);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    line-height: var(--ub-leading-snug);
    text-align: center;
}

.ub-sticky-actions__link svg {
    flex-shrink: 0;
}

.ub-sticky-actions__link--primary {
    background: var(--ub-color-primary);
    color: var(--ub-color-on-brand);
}

.ub-sticky-actions__link--primary:hover,
.ub-sticky-actions__link--primary:focus-visible {
    background: var(--ub-color-primary-hover);
    color: var(--ub-color-on-brand);
}

@media (min-width: 640px) {
    .ub-hero__proof {
        grid-template-columns: repeat(3, 1fr);
    }

    .ub-hero__proof li {
        flex-direction: column;
        gap: 6px;
    }
}

@media (min-width: 768px) {
    .ub-sticky-actions {
        display: none;
    }

    /* The hero fills the first viewport, so its video control and the fixed
       Messenger link would share the bottom-right corner at scroll 0. Move
       the control left of the link and centre it on the link's 56px disc
       (the control is a 44px small button), only when the link is rendered. */
    .ub-home:has(.ub-messenger) .ub-hero__video-control {
        right: calc(var(--ub-space-2xl) + var(--ub-size-fab) + var(--ub-space-l));
        bottom: calc(var(--ub-space-2xl) + (var(--ub-size-fab) - var(--ub-size-touch-target)) / 2);
    }
}

@media (max-width: 767px) {
    .ub-hero__video-control {
        top: var(--ub-space-l);
        bottom: auto;
    }

    /* Sit above the sticky action bar (8px padding + 48px link + 8px padding
       + 1px borders) with a 12px gap, aligned to the bar's right edge. */
    body.ub-home .ub-messenger {
        right: max(var(--ub-space-l), env(safe-area-inset-right));
        bottom: calc(max(var(--ub-space-l), env(safe-area-inset-bottom))
            + var(--ub-space-s) * 2 + var(--ub-size-icon-chip-lg) + 2px
            + var(--ub-space-l));
    }

    .ub-hero__layout {
        padding-bottom: clamp(88px, 18vw, 128px);
    }

    .ub-hero__assurance {
        padding: var(--ub-space-l);
    }

    body.ub-home .ub-footer__bottom {
        padding-bottom: calc(var(--ub-space-2xl) + var(--ub-size-icon-chip-lg) + var(--ub-space-2xl));
    }
}