/*
 * Yubeen Site Assets — Home Page
 * Plugin version: 0.27.14
 * Home migration: 2026-08-20 — Markup-Only Handoff / Responsive Performance Final
 *
 * ARCHITECTURE
 * --------------------------------------------------------------------------
 * Elementor owns semantic HTML markup only.
 * This file owns ALL Home page visual CSS for the five current screens plus
 * the Quick Contact controller shell.
 *
 * Loaded only when the existing Site Assets `home_enabled` bundle is enabled
 * and WordPress resolves the front page / Home page.
 *
 * CURRENT COMPONENT MAP
 * 01  Product Field Hero             — yb-home-hero-v55
 * 02  Clarity, by design.            — yb-home-optics-v13
 * 03  Brand Signature                — yb-home-brand-v22
 * 04  Real-World Field Use           — yb-home-field-v32
 * 05  Partnership Finale             — yb-home-finale-v14
 * 90  Quick Contact Controller       — yb-qc-v19
 *
 * MAINTENANCE RULES
 * --------------------------------------------------------------------------
 * 1. Do not put permanent <style> blocks back into Elementor.
 * 2. Do not rename a component root/class/data hook in Elementor alone.
 * 3. Page-specific media URLs stay in markup where they are content/data.
 * 4. Responsive visual rules stay here.
 * 5. Before changing a sealed component, edit one scoped component section and
 *    run Desktop / Tablet / Mobile regression checks.
 * 6. The old Stage 3M Home CSS is archived under docs/ and is NOT loaded.
 */

/* ==========================================================================
   01. Home Screen 01 — Full-Bleed Product Field Carousel
   Source version: v5.5 FINAL Responsive Performance

   MAINTENANCE
   Hero carousel. DH9 is the initial high-priority slide; VX4/PT6 are deferred. Mobile uses dedicated lightweight assets and does not autoplay.

   Ownership
   - CSS lives here: assets/css/pages/home.css
   - Elementor keeps markup only.
   - Do NOT copy this CSS back into the Elementor HTML Widget.
   ========================================================================== */

/* ==========================================================================
   00. ROOT
   ========================================================================== */

.yb-home-hero-v55{
    --yb-red:#e31e24;
    --yb-ink:#151a1d;
    --yb-soft:#737c81;
    --yb-line:#dde1e2;
    --yb-paper:#f7f7f4;

    /*
     * DESKTOP WORKING CANVAS
     *
     * The Home Hero may visually reach the full browser width on ordinary
     * desktops, but it must stop growing on ultrawide / zoomed-out views.
     * 1920px is the approved desktop artboard ceiling. Below 1920px the
     * component remains fluid; Tablet/Mobile keep their own breakpoints.
     */
    --yb-home-desktop-canvas:1920px;

    position:relative;

    width:100%;
    overflow:hidden;

    color:var(--yb-ink);
    background:var(--yb-paper);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.yb-home-hero-v55,
.yb-home-hero-v55 *,
.yb-home-hero-v55 *::before,
.yb-home-hero-v55 *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   01. FULL-WIDTH STAGE

   The stage ratio changes only at the three normal CSS breakpoints.
   Browser zoom therefore behaves like a conventional responsive website.
   ========================================================================== */

.yb-home-hero-v55__stage{
    position:relative;

    width:100%;

    aspect-ratio:16 / 5.9;

    overflow:hidden;

    background:#dfe3df;

    touch-action:pan-y;

    cursor:pointer;
}


/* Full-stage product link.
   It sits above the photograph but below all carousel UI controls. */
.yb-home-hero-v55__stage-link{
    position:absolute;

    z-index:4;

    inset:0;

    display:block;

    cursor:pointer;

    text-decoration:none;

    outline:none;

    -webkit-tap-highlight-color:
        transparent;
}


.yb-home-hero-v55__stage-link:focus-visible{
    outline:
        3px solid
        rgba(227,30,36,.72);

    outline-offset:
        -5px;
}


.yb-home-hero-v55__track{
    width:100%;
    height:100%;

    display:flex;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        .82s
        cubic-bezier(.22,1,.36,1);

    will-change:transform;
}


.yb-home-hero-v55__slide{
    position:relative;

    width:100%;
    height:100%;

    flex:
        0 0 100%;

    margin:0;

    overflow:hidden;

    background:#dfe3df;
}


.yb-home-hero-v55__slide picture{
    display:block;

    width:100%;
    height:100%;
}


.yb-home-hero-v55__slide img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    filter:none;
    transform:none;

    user-select:none;
    -webkit-user-drag:none;
}


/* ==========================================================================
   02. DESKTOP IMAGE COMPOSITION

   Only crop-position differs.
   No scaling distortion.
   ========================================================================== */

.yb-home-hero-v55__slide--dh9 img{
    object-position:62% 50%;
}


.yb-home-hero-v55__slide--vx4 img{
    object-position:50% 50%;
}


.yb-home-hero-v55__slide--pt6 img{
    object-position:50% 51%;
}


/* ==========================================================================
   03. QUIET ON-IMAGE UI

   These are interface labels only — not marketing copy.
   No overlay / no dark gradient.
   ========================================================================== */

.yb-home-hero-v55__category-tag{
    position:absolute;

    z-index:5;

    left:20px;
    top:20px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(255,255,255,.54);

    border-radius:999px;

    color:#fff;

    background:
        rgba(13,17,19,.19);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    font-size:7px;
    font-weight:770;
    letter-spacing:.14em;

    text-transform:uppercase;

    text-shadow:
        0 1px 10px
        rgba(0,0,0,.24);
}


.yb-home-hero-v55__counter{
    position:absolute;

    z-index:6;

    right:20px;
    top:20px;

    min-width:74px;
    height:32px;

    padding:
        0
        11px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(255,255,255,.54);

    border-radius:999px;

    color:#fff;

    background:
        rgba(13,17,19,.19);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    font-size:7px;
    font-weight:770;
    letter-spacing:.13em;

    text-transform:uppercase;

    text-shadow:
        0 1px 10px
        rgba(0,0,0,.24);
}


/* ==========================================================================
   04. ARROWS
   ========================================================================== */

.yb-home-hero-v55__arrow{
    position:absolute;

    z-index:7;

    top:50%;

    width:44px;
    height:44px;

    padding:0;

    display:grid;
    place-items:center;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(255,255,255,.58);

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    background:
        rgba(11,15,17,.13);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    font:inherit;
    font-size:19px;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.yb-home-hero-v55__arrow:hover{
    background:
        rgba(11,15,17,.32);

    border-color:
        rgba(255,255,255,.84);
}


.yb-home-hero-v55__arrow--prev{
    left:18px;
}


.yb-home-hero-v55__arrow--next{
    right:18px;
}


/* ==========================================================================
   05. EDITORIAL RAIL

   More restrained than v5.1:
   - no repeated portfolio category list
   - only current model, category, sentence, progress, arrows
   ========================================================================== */

.yb-home-hero-v55__rail{
    position:relative;

    width:100%;

    background:
        rgba(248,248,245,.98);

    border-bottom:
        1px solid
        var(--yb-line);
}


.yb-home-hero-v55__segments{
    position:absolute;

    left:0;
    right:0;
    top:-3px;

    height:3px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:2px;

    pointer-events:none;
}


.yb-home-hero-v55__segments span{
    background:
        rgba(17,21,24,.08);
}


.yb-home-hero-v55__segments span.is-active{
    background:
        linear-gradient(
            90deg,
            #7e9baa,
            var(--yb-red)
        );
}


.yb-home-hero-v55__rail-inner{
    width:
        min(
            calc(100% - 64px),
            1480px
        );

    min-height:88px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(260px,.85fr)
        minmax(420px,1.4fr)
        auto;

    align-items:center;

    gap:42px;
}


.yb-home-hero-v55__identity{
    min-width:0;
}


.yb-home-hero-v55__eyebrow{
    display:flex;
    align-items:center;

    gap:9px;

    margin-bottom:5px;

    color:#90989c;

    font-size:7px;
    font-weight:770;
    letter-spacing:.14em;

    text-transform:uppercase;
}


.yb-home-hero-v55__eyebrow::before{
    content:"";

    width:27px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            #7597aa,
            var(--yb-red)
        );
}


.yb-home-hero-v55__model{
    margin:0;

    color:#1e2427;

    font-size:17px;
    line-height:1.18;

    font-weight:710;
    letter-spacing:-.025em;
}


.yb-home-hero-v55__model span{
    color:#747e83;

    font-weight:520;
}


.yb-home-hero-v55__statement{
    max-width:600px;

    margin:0;

    color:#767f84;

    font-size:12px;
    line-height:1.55;
}


.yb-home-hero-v55__controls{
    display:flex;
    align-items:center;

    gap:8px;
}


.yb-home-hero-v55__rail-arrow{
    width:36px;
    height:36px;

    padding:0;

    display:grid;
    place-items:center;

    border:
        1px solid
        #d6dadd;

    border-radius:50%;

    cursor:pointer;

    color:#3c4549;

    background:
        rgba(255,255,255,.68);

    font:inherit;
    font-size:15px;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.yb-home-hero-v55__rail-arrow:hover{
    color:var(--yb-red);

    border-color:
        rgba(227,30,36,.30);

    background:#fff;
}


/* ==========================================================================
   05A. DESKTOP WORKING-WIDTH LOCK

   ROOT CAUSE FIX — 2026-08-20
   ----------------------------
   The migrated component correctly preserved width:100%, but that means an
   ultrawide / zoomed-out viewport can keep stretching the Hero stage forever.
   The old visual target is a fixed desktop working canvas, not an infinitely
   expanding photograph.

   Important:
   - Only Desktop >=1200px is capped.
   - 1920px and below still use 100% of the available width.
   - The editorial rail is capped with the image stage so the two remain one
     visual unit.
   - Image object-fit/object-position rules are untouched.
   ========================================================================== */

@media(min-width:1200px){

    .yb-home-hero-v55__stage,
    .yb-home-hero-v55__rail{
        width:
            min(
                100%,
                var(--yb-home-desktop-canvas)
            );

        max-width:
            var(--yb-home-desktop-canvas);

        margin-left:auto;
        margin-right:auto;
    }
}


/* ==========================================================================
   06. TABLET
   ========================================================================== */

@media(max-width:1199px){

    .yb-home-hero-v55__stage{
        aspect-ratio:16 / 8.4;
    }


    .yb-home-hero-v55__slide--dh9 img{
        object-position:63% 50%;
    }


    .yb-home-hero-v55__slide--vx4 img{
        object-position:52% 50%;
    }


    .yb-home-hero-v55__slide--pt6 img{
        object-position:52% 50%;
    }


    .yb-home-hero-v55__rail-inner{
        width:
            min(
                calc(100% - 42px),
                1040px
            );

        min-height:104px;

        grid-template-columns:
            minmax(225px,.9fr)
            minmax(300px,1.25fr)
            auto;

        gap:24px;
    }


    .yb-home-hero-v55__statement{
        font-size:11px;
    }
}


/* ==========================================================================
   07. MOBILE
   The stage becomes 3:2 rather than a tall fake desktop hero.
   This keeps the photographs readable and protects the product.
   ========================================================================== */

@media(max-width:767px){

    .yb-home-hero-v55__stage{
        aspect-ratio:3 / 2;
    }


    .yb-home-hero-v55__slide--dh9 img{
        object-position:64% 50%;
    }


    .yb-home-hero-v55__slide--vx4 img{
        object-position:57% 50%;
    }


    .yb-home-hero-v55__slide--pt6 img{
        object-position:55% 50%;
    }


    .yb-home-hero-v55__category-tag{
        left:12px;
        top:12px;

        padding:
            7px
            9px;

        font-size:6px;
    }


    .yb-home-hero-v55__counter{
        right:12px;
        top:12px;

        min-width:64px;
        height:29px;

        font-size:6px;
    }


    .yb-home-hero-v55__arrow{
        display:none;
    }


    .yb-home-hero-v55__rail-inner{
        width:
            calc(
                100% - 32px
            );

        min-height:116px;

        padding:
            15px
            0
            18px;

        grid-template-columns:
            1fr
            auto;

        gap:
            9px
            14px;
    }


    .yb-home-hero-v55__identity{
        align-self:center;
    }


    .yb-home-hero-v55__model{
        font-size:15px;
    }


    .yb-home-hero-v55__statement{
        grid-column:
            1 / -1;

        grid-row:2;

        max-width:420px;

        /*
         * LOCKED TWO-LINE METADATA SLOT
         * DH9 is shorter than VX4/PT6. Reserving two lines prevents
         * the information rail from changing height during carousel changes.
         */
        height:3.10em;
        min-height:3.10em;

        overflow:hidden;

        display:-webkit-box;

        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;

        font-size:10.5px;
        line-height:1.55;
    }


    .yb-home-hero-v55__controls{
        grid-column:2;
        grid-row:1;

        align-self:center;
    }


    .yb-home-hero-v55__rail-arrow{
        width:34px;
        height:34px;
    }
}


/* ==========================================================================
   08. SMALL MOBILE
   ========================================================================== */

@media(max-width:390px){

    .yb-home-hero-v55__rail-inner{
        min-height:120px;
    }


    .yb-home-hero-v55__statement{
        height:3.20em;
        min-height:3.20em;
    }
}


/* ==========================================================================
   09. REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce){

    .yb-home-hero-v55__track{
        transition:none;
    }
}


/* ==========================================================================
   02. Home Screen 02 — Clarity, by design.
   Source version: v1.7 FINAL Mobile Asset Anchored

   MAINTENANCE
   Optical technology interlude. Mobile lens asset is independently anchored below copy; do not restore the failed v1.6 full-stage object-fit positioning.

   Ownership
   - CSS lives here: assets/css/pages/home.css
   - Elementor keeps markup only.
   - Do NOT copy this CSS back into the Elementor HTML Widget.
   ========================================================================== */

/* ==========================================================================
   00. ROOT
   ========================================================================== */

.yb-home-optics-v13{
    --yb-red:#e31e24;
    --yb-ink:#111518;
    --yb-muted:#7b8489;
    --yb-ivory:#f3f2ee;
    --yb-content-max:1480px;

    position:relative;

    width:100%;
    overflow:hidden;
    isolation:isolate;

    color:var(--yb-ink);

    background:
        radial-gradient(
            ellipse at 50% 38%,
            rgba(255,255,255,1) 0%,
            rgba(250,250,247,.98) 42%,
            rgba(242,242,238,.96) 74%,
            rgba(235,238,237,.92) 100%
        );

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.yb-home-optics-v13,
.yb-home-optics-v13 *,
.yb-home-optics-v13 *::before,
.yb-home-optics-v13 *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   01. VERY SOFT TRANSITION FROM PREVIOUS DARK HERO
   ========================================================================== */

.yb-home-optics-v13__top-soften{
    position:absolute;
    z-index:20;

    left:0;
    right:0;
    top:0;

    height:18px;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(7,11,15,.12) 0%,
            rgba(7,11,15,.035) 42%,
            transparent 100%
        );
}


/* ==========================================================================
   02. FIXED CONTENT WIDTH
   Same visual width logic as the surrounding Home sections.
   ========================================================================== */

.yb-home-optics-v13__inner{
    position:relative;
    z-index:1;

    width:
        min(
            calc(100% - 56px),
            var(--yb-content-max)
        );

    margin:0 auto;
}


/* ==========================================================================
   03. OPTICAL COMPOSITION
   The transparent image IS the visual background.

   IMPORTANT:
   - 2:1 aspect ratio matches the source asset.
   - background-size: contain keeps the entire lens system visible.
   - no cover crop.
   - no 100vw breakout.
   - no JS position movement.
   ========================================================================== */

.yb-home-optics-v13__composition{
    position:relative;

    width:100%;
    aspect-ratio:2 / 1;

    min-height:520px;
    max-height:690px;

    margin:0 auto;

    overflow:hidden;

}


/*
 * PERFORMANCE IMAGE LAYER
 *
 * Real <img> instead of CSS background:
 * - browser can lazy-load it
 * - explicit intrinsic dimensions prevent layout ambiguity
 * - object-fit:contain preserves the complete transparent optical system
 */
.yb-home-optics-v13__asset-picture{
    position:absolute;
    z-index:2;

    inset:0;

    display:block;

    pointer-events:none;
}


.yb-home-optics-v13__asset{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
    object-position:center center;

    pointer-events:none;

    user-select:none;
    -webkit-user-drag:none;
}


/*
 * Subtle central atmosphere.
 * This is behind the copy and visually connects the transparent rays.
 */
.yb-home-optics-v13__composition::before{
    content:"";

    position:absolute;
    z-index:0;

    left:50%;
    top:50%;

    width:55%;
    height:52%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(150,190,213,.10) 0%,
            rgba(171,190,203,.045) 43%,
            transparent 72%
        );

    filter:blur(34px);

    pointer-events:none;
}


/*
 * One extremely soft horizontal light breath.
 * It never changes image position or crop.
 */
.yb-home-optics-v13__composition::after{
    content:"";

    position:absolute;
    z-index:1;

    left:11%;
    right:11%;
    top:54%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(126,181,211,.16) 17%,
            rgba(255,255,255,.54) 40%,
            rgba(227,30,36,.08) 50%,
            rgba(255,255,255,.52) 60%,
            rgba(145,162,213,.15) 83%,
            transparent 100%
        );

    opacity:.72;

    pointer-events:none;
}


/* ==========================================================================
   04. COPY
   The text sits inside the transparent space of the generated asset.
   ========================================================================== */

.yb-home-optics-v13__copy{
    position:absolute;
    z-index:5;

    left:50%;
    top:6.8%;

    width:
        min(
            760px,
            72%
        );

    transform:translateX(-50%);

    text-align:center;
}


.yb-home-optics-v13__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:15px;

    color:var(--yb-red);

    font-size:9px;
    font-weight:800;
    letter-spacing:.18em;

    text-transform:uppercase;
}


.yb-home-optics-v13__eyebrow::before{
    content:"";

    width:34px;
    height:2px;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            #8eb8d0 0%,
            #cbd8df 44%,
            var(--yb-red) 78%,
            #ef8958 100%
        );
}


.yb-home-optics-v13__title{
    margin:0;

    color:var(--yb-ink);

    font-size:
        clamp(
            48px,
            4.8vw,
            76px
        );

    line-height:.96;

    font-weight:620;
    letter-spacing:-.056em;
}


.yb-home-optics-v13__title span{
    color:var(--yb-red);
}


.yb-home-optics-v13__statement{
    max-width:660px;

    margin:
        16px
        auto
        0;

    color:
        #263036;

    font-size:
        clamp(
            13px,
            .92vw,
            15px
        );

    line-height:1.62;
}


/* ==========================================================================
   05. BOTTOM SPACING / HANDOFF
   ========================================================================== */

.yb-home-optics-v13__bottom-space{
    height:
        clamp(
            14px,
            1.5vw,
            22px
        );
}


/* ==========================================================================
   06. TABLET
   ========================================================================== */

@media(max-width:1024px){

    .yb-home-optics-v13__inner{
        width:
            min(
                calc(100% - 40px),
                var(--yb-content-max)
            );
    }


    .yb-home-optics-v13__composition{
        min-height:470px;
        max-height:none;
    }


    .yb-home-optics-v13__copy{
        top:7%;

        width:
            min(
                720px,
                78%
            );
    }


    .yb-home-optics-v13__title{
        font-size:
            clamp(
                46px,
                6.4vw,
                68px
            );
    }
}


/* ==========================================================================
   06A. TABLET — DEDICATED LENS ANCHOR

   ROOT CAUSE FIX — 2026-08-20 / REVISION 2
   -----------------------------------------
   The previous Tablet patch tried to move the lens with object-position.
   That was not sufficient because the transparent optical asset and the
   Tablet composition have nearly the same aspect ratio. There is very little
   spare object-fit space, so changing object-position only moves the image by
   a few pixels.

   Tablet now uses the same architectural idea that already proved stable on
   Mobile: the optical picture is an independently anchored proportional image
   below the copy.

   IMPORTANT
   - Desktop >=1025px keeps the approved desktop composition.
   - Mobile <=767px keeps the approved v1.7 mobile calibration unchanged.
   - Only 768–1024px is replaced here.
   - No crop and no distortion: width is proportional, height remains auto.
   ========================================================================== */

@media(min-width:768px) and (max-width:1024px){

    .yb-home-optics-v13__composition{
        aspect-ratio:auto;

        height:
            clamp(
                430px,
                52vw,
                535px
            );

        min-height:0;
        max-height:none;
    }


    .yb-home-optics-v13__asset-picture{
        inset:auto;

        left:50%;
        top:112px;

        width:
            calc(
                100% + 20px
            );

        height:auto;

        transform:
            translateX(-50%);
    }


    .yb-home-optics-v13__asset{
        width:100%;
        height:auto;

        object-fit:initial;
        object-position:initial;
    }


    .yb-home-optics-v13__copy{
        top:24px;

        width:
            min(
                720px,
                84%
            );
    }


    .yb-home-optics-v13__composition::before{
        top:62%;
    }


    .yb-home-optics-v13__composition::after{
        top:62%;
    }
}


/* ==========================================================================
   07. MOBILE — COMPACT HEIGHT
   Keep the complete transparent lens system visible without creating
   the large empty lower field seen in the previous mobile version.
   Desktop / Tablet rules above remain unchanged.
   ========================================================================== */

@media(max-width:767px){

    .yb-home-optics-v13__inner{
        width:
            calc(100% - 28px);
    }


    /*
     * MOBILE LAYOUT PRINCIPLE
     *
     * Do NOT let the transparent optical image fill the entire mobile stage.
     * The copy owns the upper zone.
     * The lens asset is anchored as its own proportional image below the copy.
     */
    .yb-home-optics-v13__composition{
        aspect-ratio:auto;

        height:382px;
        min-height:382px;
        max-height:none;
    }


    .yb-home-optics-v13__asset-picture{
        inset:auto;

        left:50%;
        top:154px;

        width:
            calc(
                100% + 10px
            );

        height:auto;

        transform:
            translateX(-50%);
    }


    .yb-home-optics-v13__asset{
        width:100%;
        height:auto;

        object-fit:initial;
        object-position:initial;
    }


    .yb-home-optics-v13__copy{
        top:25px;

        width:96%;
    }


    .yb-home-optics-v13__eyebrow{
        margin-bottom:9px;

        font-size:7.5px;
        line-height:1;

        letter-spacing:.16em;
    }


    .yb-home-optics-v13__title{
        font-size:
            clamp(
                35px,
                9.8vw,
                40px
            );

        line-height:.96;

        white-space:nowrap;
    }


    .yb-home-optics-v13__statement{
        max-width:96%;

        margin-top:11px;

        font-size:12px;
        line-height:1.45;
    }


    .yb-home-optics-v13__composition::before{
        left:50%;
        top:64%;

        width:88%;
        height:42%;

        filter:
            blur(26px);
    }


    .yb-home-optics-v13__composition::after{
        top:61%;

        left:3%;
        right:3%;
    }


    .yb-home-optics-v13__bottom-space{
        height:4px;
    }
}


/* ==========================================================================
   08. SMALL MOBILE — 430px AND BELOW
   ========================================================================== */

@media(max-width:430px){

    .yb-home-optics-v13__composition{
        height:372px;
        min-height:372px;
    }


    .yb-home-optics-v13__asset-picture{
        top:151px;

        width:
            calc(
                100% + 8px
            );
    }


    .yb-home-optics-v13__copy{
        top:23px;

        width:97%;
    }


    .yb-home-optics-v13__title{
        font-size:
            clamp(
                34px,
                9.7vw,
                39px
            );
    }


    .yb-home-optics-v13__statement{
        max-width:98%;

        margin-top:10px;

        font-size:11.8px;
        line-height:1.43;
    }
}


/* ==========================================================================
   09. VERY SMALL MOBILE
   ========================================================================== */

@media(max-width:360px){

    .yb-home-optics-v13__composition{
        height:356px;
        min-height:356px;
    }


    .yb-home-optics-v13__asset-picture{
        top:145px;

        width:
            calc(
                100% + 6px
            );
    }


    .yb-home-optics-v13__copy{
        top:21px;
    }


    .yb-home-optics-v13__title{
        font-size:34px;
    }


    .yb-home-optics-v13__statement{
        font-size:11.3px;
    }
}


/* ==========================================================================
   03. Home Screen 03 — Brand Signature
   Source version: v2.2 FINAL Compact Brand Beat

   MAINTENANCE
   Short brand interlude only. No CTA, no carousel, no runtime animation loop.

   Ownership
   - CSS lives here: assets/css/pages/home.css
   - Elementor keeps markup only.
   - Do NOT copy this CSS back into the Elementor HTML Widget.
   ========================================================================== */

/* ==========================================================================
   00. TOKENS / ROOT
   ========================================================================== */

#yb-home-brand-v22{
    --yb-red:#e31e24;
    --yb-blue:#7899ad;
    --yb-violet:#8f7ba7;
    --yb-graphite:#090d11;

    --yb-wordmark:
        url("/wp-content/uploads/2026/08/yubeen-wordmark-mask-official.webp");

    position:relative;

    width:100%;
    height:218px;

    overflow:hidden;
    isolation:isolate;

    color:#fff;

    background:#090d11;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


#yb-home-brand-v22,
#yb-home-brand-v22 *,
#yb-home-brand-v22 *::before,
#yb-home-brand-v22 *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   01. BACKGROUND MATERIAL
   ========================================================================== */

.yb-home-brand-v22__field{
    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

    background:
        radial-gradient(
            ellipse at 50% 48%,
            #182128 0%,
            #10161b 44%,
            #0a0e12 73%,
            #07090c 100%
        );
}


.yb-home-brand-v22__field::before{
    content:"";

    position:absolute;

    left:18%;
    top:-70%;

    width:64%;
    height:220%;

    border-radius:50%;

    opacity:.72;

    background:
        radial-gradient(
            ellipse at center,
            rgba(116,153,178,.105) 0%,
            rgba(78,105,124,.038) 39%,
            transparent 69%
        );

    filter:blur(36px);

    pointer-events:none;
}


.yb-home-brand-v22__field::after{
    content:"";

    position:absolute;

    right:-10%;
    bottom:-120%;

    width:48%;
    height:210%;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(227,30,36,.060) 0%,
            rgba(157,51,91,.020) 40%,
            transparent 69%
        );

    filter:blur(42px);

    pointer-events:none;
}


/*
 * Subtle texture only.
 * Kept extremely weak so the strip reads as material,
 * not as a patterned "PPT background".
 */
.yb-home-brand-v22__grain{
    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    opacity:.018;

    mix-blend-mode:screen;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            rgba(255,255,255,.84) 0 1px,
            transparent 1px 5px
        );

    background-size:
        11px 11px;
}


/* thin structural lines */
.yb-home-brand-v22__structure{
    position:absolute;

    inset:0;

    z-index:2;

    overflow:hidden;

    pointer-events:none;

    opacity:.34;
}


.yb-home-brand-v22__structure::before,
.yb-home-brand-v22__structure::after{
    content:"";

    position:absolute;

    top:50%;

    width:24%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(125,155,173,.18),
            rgba(255,255,255,.055),
            transparent
        );
}


.yb-home-brand-v22__structure::before{
    left:0;

    transform:
        translateY(-50%);
}


.yb-home-brand-v22__structure::after{
    right:0;

    transform:
        translateY(-50%)
        scaleX(-1);
}


/* ==========================================================================
   02. CONTENT FRAME
   ========================================================================== */

.yb-home-brand-v22__inner{
    position:relative;

    z-index:10;

    width:
        min(
            calc(100% - 48px),
            1280px
        );

    height:100%;

    margin:
        0
        auto;

    display:flex;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}


/* ==========================================================================
   03. META
   ========================================================================== */

.yb-home-brand-v22__meta{
    display:inline-flex;

    align-items:center;

    gap:9px;

    margin:
        0
        0
        12px;

    color:
        #ffffff;

    font-size:7.5px;
    line-height:1;
    font-weight:760;
    letter-spacing:.18em;

    text-transform:uppercase;
}


.yb-home-brand-v22__meta::before{
    content:"";

    width:28px;
    height:1.5px;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            var(--yb-blue) 0%,
            #b7c5ce 41%,
            var(--yb-red) 78%,
            #ef8558 100%
        );
}


/* ==========================================================================
   04. BRAND LOCKUP
   ========================================================================== */

.yb-home-brand-v22__lockup{
    position:relative;

    width:
        min(
            68vw,
            770px
        );

    display:flex;

    align-items:center;
    justify-content:center;

    gap:
        clamp(
            18px,
            2.4vw,
            32px
        );
}


/* official Yubeen icon — always stays brand red */
.yb-home-brand-v22__icon{
    width:
        clamp(
            54px,
            5.2vw,
            70px
        );

    height:auto;

    flex:
        0
        0
        auto;

    display:block;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    filter:
        drop-shadow(
            0
            10px
            20px
            rgba(0,0,0,.18)
        );
}


/* ==========================================================================
   05. WORDMARK
   ========================================================================== */

.yb-home-brand-v22__wordmark{
    position:relative;

    width:
        min(
            51vw,
            610px
        );

    aspect-ratio:
        2365 / 408;

    flex:
        0
        1
        auto;

    isolation:isolate;
}


/*
 * Fallback:
 * the real WebP is visible underneath all coating masks.
 * Even if browser CSS masking is disabled, YUBEEN still remains visible.
 */
.yb-home-brand-v22__wordmark-base{
    position:absolute;

    inset:0;

    z-index:0;

    width:100%;
    height:100%;

    object-fit:contain;

    opacity:.67;

    filter:
        grayscale(1)
        brightness(1.62)
        contrast(.78);

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;
}


/* coating layers use the exact official wordmark as a mask */
.yb-home-brand-v22__mask{
    position:absolute;

    inset:0;

    pointer-events:none;

    -webkit-mask-image:
        var(--yb-wordmark);

    mask-image:
        var(--yb-wordmark);

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-size:contain;
    mask-size:contain;
}


/* silver-metal base */
.yb-home-brand-v22__metal{
    z-index:1;

    opacity:.72;

    background:
        linear-gradient(
            103deg,
            #8f9ba1 0%,
            #d7dee1 17%,
            #a4afb5 35%,
            #eef1f2 51%,
            #a0abb1 69%,
            #cad2d5 84%,
            #8f9ba1 100%
        );
}


/* cool optical coating */
.yb-home-brand-v22__coating{
    z-index:2;

    opacity:.50;

    mix-blend-mode:screen;

    background:
        radial-gradient(
            ellipse
            24%
            145%
            at
            52%
            48%,

            rgba(255,255,255,.88) 0%,
            rgba(212,237,249,.54) 18%,
            rgba(105,169,204,.28) 34%,
            rgba(157,123,191,.17) 50%,
            transparent 69%
        );
}


/* very restrained warm edge */
.yb-home-brand-v22__warmth{
    z-index:3;

    opacity:.17;

    mix-blend-mode:screen;

    background:
        radial-gradient(
            circle
            at
            68%
            48%,

            rgba(255,191,97,.34) 0%,
            rgba(227,30,36,.18) 17%,
            rgba(143,48,133,.08) 33%,
            transparent 57%
        );
}


/*
 * One very slow glide.
 * CSS only — no requestAnimationFrame and no permanent JS loop.
 */
.yb-home-brand-v22__glide{
    z-index:4;

    opacity:.45;

    mix-blend-mode:screen;

    background:
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 40%,
            rgba(255,255,255,.03) 44%,
            rgba(255,255,255,.44) 49%,
            rgba(121,177,208,.11) 53%,
            transparent 58%,
            transparent 100%
        );

    background-size:
        255%
        100%;

    animation:
        ybHomeBrandV22Glide
        11.8s
        cubic-bezier(.45,0,.55,1)
        infinite;
}


@keyframes ybHomeBrandV22Glide{
    0%{
        background-position:
            132%
            50%;
    }

    45%,
    100%{
        background-position:
            -42%
            50%;
    }
}


/* ==========================================================================
   06. TAGLINE
   ========================================================================== */

.yb-home-brand-v22__tagline{
    margin:
        10px
        0
        0;

    color:
        #ffffff;

    font-size:6.8px;
    line-height:1;
    font-weight:700;
    letter-spacing:.18em;

    text-transform:uppercase;
}


/* ==========================================================================
   07. BOTTOM SIGNAL
   ========================================================================== */

.yb-home-brand-v22__signal{
    position:absolute;

    left:50%;
    bottom:15px;

    z-index:8;

    width:
        min(
            118px,
            24vw
        );

    height:1px;

    transform:
        translateX(-50%);

    border-radius:99px;

    opacity:.36;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--yb-blue) 18%,
            #b4c3cc 40%,
            var(--yb-red) 69%,
            #ef8051 84%,
            transparent
        );
}


/* ==========================================================================
   08. TABLET
   ========================================================================== */

@media(max-width:1024px){

    #yb-home-brand-v22{
        height:194px;
    }


    .yb-home-brand-v22__inner{
        width:
            min(
                calc(100% - 40px),
                980px
            );
    }


    .yb-home-brand-v22__meta{
        margin-bottom:10px;

        font-size:7px;
    }


    .yb-home-brand-v22__lockup{
        width:78vw;

        gap:
            clamp(
                16px,
                2.8vw,
                26px
            );
    }


    .yb-home-brand-v22__icon{
        width:
            clamp(
                50px,
                7vw,
                64px
            );
    }


    .yb-home-brand-v22__wordmark{
        width:
            min(
                58vw,
                560px
            );
    }


    .yb-home-brand-v22__tagline{
        margin-top:8px;

        font-size:6.2px;
    }


    .yb-home-brand-v22__signal{
        bottom:13px;
    }
}


/* ==========================================================================
   09. MOBILE
   ========================================================================== */

@media(max-width:767px){

    #yb-home-brand-v22{
        height:164px;
    }


    .yb-home-brand-v22__inner{
        width:
            calc(
                100% - 28px
            );
    }


    .yb-home-brand-v22__meta{
        gap:7px;

        margin-bottom:9px;

        font-size:6.1px;

        letter-spacing:.15em;
    }


    .yb-home-brand-v22__meta::before{
        width:22px;
    }


    .yb-home-brand-v22__lockup{
        width:92vw;

        gap:
            clamp(
                11px,
                3.2vw,
                18px
            );
    }


    .yb-home-brand-v22__icon{
        width:
            clamp(
                42px,
                13vw,
                54px
            );
    }


    .yb-home-brand-v22__wordmark{
        width:
            min(
                70vw,
                480px
            );
    }


    .yb-home-brand-v22__tagline{
        margin-top:7px;

        font-size:5.4px;

        letter-spacing:.15em;
    }


    .yb-home-brand-v22__signal{
        bottom:10px;

        width:
            min(
                92px,
                28vw
            );
    }


    .yb-home-brand-v22__structure{
        opacity:.24;
    }
}


/* ==========================================================================
   10. SMALL MOBILE
   ========================================================================== */

@media(max-width:390px){

    #yb-home-brand-v22{
        height:154px;
    }


    .yb-home-brand-v22__meta{
        margin-bottom:8px;
    }


    .yb-home-brand-v22__icon{
        width:
            clamp(
                39px,
                12.8vw,
                48px
            );
    }


    .yb-home-brand-v22__wordmark{
        width:71vw;
    }


    .yb-home-brand-v22__tagline{
        font-size:5px;
    }
}


/* ==========================================================================
   11. REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce){

    .yb-home-brand-v22__glide{
        animation:none !important;

        background-position:
            50%
            50%;
    }
}


/* ==========================================================================
   04. Home Screen 04 — Real-World Field Use
   Source version: v3.2 FINAL Responsive Performance

   MAINTENANCE
   Real-world product photography. Desktop keeps the full-resolution image; mobile uses the 1280×640 responsive asset. Images remain proportional and uncropped.

   Ownership
   - CSS lives here: assets/css/pages/home.css
   - Elementor keeps markup only.
   - Do NOT copy this CSS back into the Elementor HTML Widget.
   ========================================================================== */

/* ==========================================================================
   00. ROOT
   ========================================================================== */

.yb-home-field-v32{
    --yb-red:#e31e24;
    --yb-ink:#111518;
    --yb-muted:#687178;
    --yb-paper:#f4f3ef;
    --yb-line:#dfe2e1;

    /*
     * Keep Screen 04 on the same approved Desktop working canvas as Hero.
     * Below 1920px the photograph remains fully fluid and proportional.
     */
    --yb-home-desktop-canvas:1920px;

    position:relative;

    width:100%;
    overflow:hidden;

    background:var(--yb-paper);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.yb-home-field-v32,
.yb-home-field-v32 *,
.yb-home-field-v32 *::before,
.yb-home-field-v32 *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   01. FIGURE
   ========================================================================== */

.yb-home-field-v32__figure{
    position:relative;

    width:100%;

    margin:0;

    background:#11171a;
}


/*
 * CRITICAL IMAGE RULE
 *
 * Natural ratio only.
 * No crop.
 * No distortion.
 */
.yb-home-field-v32__figure picture{
    display:block;

    width:100%;
}


.yb-home-field-v32__image{
    width:100%;
    height:auto;

    display:block;

    max-width:none;

    object-fit:initial;

    filter:none;
    transform:none;

    user-select:none;
    -webkit-user-drag:none;
}


/* ==========================================================================
   02. SMALL FIELD LABEL
   ========================================================================== */

.yb-home-field-v32__field-label{
    position:absolute;

    z-index:4;

    top:
        clamp(
            18px,
            2vw,
            34px
        );

    right:
        clamp(
            20px,
            2.5vw,
            46px
        );

    display:flex;
    align-items:center;

    gap:10px;

    color:
        #ffffff;

    font-size:7px;
    font-weight:760;
    letter-spacing:.15em;

    text-transform:uppercase;

    text-shadow:
        0 2px 12px
        rgba(0,0,0,.28);
}

.yb-home-field-v32__field-label::before{
    content:"";

    width:28px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--yb-red),
            rgba(255,255,255,.34)
        );
}


/* ==========================================================================
   03. DESKTOP EDITORIAL COPY
   Directly on the photograph — no white card.
   ========================================================================== */

.yb-home-field-v32__desktop-copy{
    position:absolute;

    z-index:5;

    left:
        clamp(
            54px,
            7vw,
            132px
        );

    top:50%;

    width:
        clamp(
            350px,
            29vw,
            500px
        );

    transform:
        translateY(-50%);

    color:#fff;
}


/*
 * Local readability atmosphere only.
 * It does NOT cover the product or the whole photograph.
 */
.yb-home-field-v32__desktop-copy::before{
    content:"";

    position:absolute;

    z-index:-1;

    left:-78px;
    top:-90px;

    width:
        calc(100% + 170px);

    height:
        calc(100% + 180px);

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 34% 50%,
            rgba(5,9,12,.48) 0%,
            rgba(5,9,12,.31) 35%,
            rgba(5,9,12,.12) 60%,
            transparent 78%
        );
}


/* ==========================================================================
   04. TYPOGRAPHY
   ========================================================================== */

.yb-home-field-v32__eyebrow{
    display:inline-flex;
    align-items:center;

    gap:11px;

    margin-bottom:18px;

    color:
        #ffffff;

    font-size:8px;
    font-weight:780;
    letter-spacing:.18em;

    text-transform:uppercase;
}

.yb-home-field-v32__eyebrow::before{
    content:"";

    width:34px;
    height:2px;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            #7898aa,
            #c0ccd3 42%,
            var(--yb-red) 78%,
            #ef8b58
        );
}


.yb-home-field-v32__title{
    max-width:440px;

    margin:0;

    color:#fff;

    font-size:
        clamp(
            46px,
            4vw,
            68px
        );

    line-height:.95;

    font-weight:590;
    letter-spacing:-.055em;
}

.yb-home-field-v32__title span{
    display:block;

    color:
        #ecf1f4;

    font-weight:500;
}


.yb-home-field-v32__statement{
    max-width:430px;

    margin:
        22px
        0 0;

    color:
        #ffffff;

    font-size:
        clamp(
            12px,
            .9vw,
            14px
        );

    line-height:1.65;
}


.yb-home-field-v32__link{
    margin-top:25px;

    display:inline-flex;
    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-size:10px;
    font-weight:760;
}

.yb-home-field-v32__link::before{
    content:"";

    width:22px;
    height:2px;

    background:var(--yb-red);
}

.yb-home-field-v32__link::after{
    content:"→";

    color:var(--yb-red);

    font-size:13px;

    transition:
        transform .2s ease;
}

.yb-home-field-v32__link:hover::after{
    transform:
        translateX(3px);
}


/* ==========================================================================
   05. ATTACHED CAPTION DOCK
   Hidden on large desktop.
   On tablet/mobile it visually belongs to the same photograph.
   ========================================================================== */

.yb-home-field-v32__dock{
    display:none;
}


/* ==========================================================================
   05A. DESKTOP FIGURE — TRUE FIXED WORKING CANVAS

   ROOT CAUSE FIX — 2026-08-20 / REVISION 2
   -----------------------------------------
   The first desktop correction used max-width:1920px + auto margins. In the
   user's zoomed-out / ultrawide desktop test the Figure still resolved as a
   left-side fixed block, leaving a large paper-colored area on the right.

   The correction is now deterministic:

   1. Normal desktop (1200–1919 CSS px):
      - Figure remains width:100%.
      - Complete photograph remains visible and proportional.

   2. Wide / zoomed-out desktop (>=1920 CSS px):
      - Figure becomes an exact 1920px working canvas.
      - left:50% + translateX(-50%) forces true geometric centering and does
        not rely on inherited flex/grid margin behaviour.
      - Root side area uses the same dark matte as the photograph instead of
        a white/paper blank field.

   3. Tablet/Mobile (<1200px):
      - Existing attached dock behaviour is unchanged.

   Natural image ratio, no crop and no distortion remain mandatory.
   ========================================================================== */

@media(min-width:1200px){

    .yb-home-field-v32{
        background:#11171a;
    }


    .yb-home-field-v32__figure{
        width:100%;
        max-width:none;

        margin:0;

        left:0;
        transform:none;
    }
}


@media(min-width:1920px){

    .yb-home-field-v32__figure{
        width:
            var(--yb-home-desktop-canvas);

        max-width:
            var(--yb-home-desktop-canvas);

        left:50%;

        transform:
            translateX(-50%);
    }
}


/* ==========================================================================
   06. TABLET
   Full image + attached dock.
   No detached independent content block.
   ========================================================================== */

@media(max-width:1199px){

    .yb-home-field-v32{
        padding-bottom:22px;

        background:var(--yb-paper);
    }


    .yb-home-field-v32__desktop-copy{
        display:none;
    }


    .yb-home-field-v32__figure{
        overflow:visible;

        background:var(--yb-paper);
    }


    .yb-home-field-v32__dock{
        position:relative;
        z-index:6;

        width:
            min(
                calc(100% - 48px),
                900px
            );

        margin:
            -34px
            auto
            0;

        padding:
            24px
            28px
            26px;

        display:grid;

        grid-template-columns:
            minmax(230px,.9fr)
            minmax(280px,1.1fr)
            auto;

        align-items:end;

        gap:
            18px
            34px;

        color:var(--yb-ink);

        background:
            rgba(247,246,242,.93);

        border:
            1px solid
            rgba(255,255,255,.78);

        box-shadow:
            0 16px 42px
            rgba(14,19,22,.10);

        backdrop-filter:
            blur(13px);

        -webkit-backdrop-filter:
            blur(13px);
    }


    .yb-home-field-v32__dock .yb-home-field-v32__eyebrow{
        grid-column:
            1 / -1;

        margin-bottom:-3px;

        color:#788186;
    }


    .yb-home-field-v32__dock .yb-home-field-v32__title{
        max-width:350px;

        color:var(--yb-ink);

        font-size:
            clamp(
                35px,
                4.6vw,
                46px
            );
    }


    .yb-home-field-v32__dock .yb-home-field-v32__title span{
        color:#58646b;
    }


    .yb-home-field-v32__dock .yb-home-field-v32__statement{
        max-width:390px;

        margin:0;

        color:#747d82;

        font-size:12px;
        line-height:1.58;
    }


    .yb-home-field-v32__dock .yb-home-field-v32__link{
        margin:0 0 3px;

        color:var(--yb-ink);

        white-space:nowrap;
    }


    .yb-home-field-v32__field-label{
        top:14px;
        right:16px;

        font-size:6px;
    }
}


/* ==========================================================================
   07. MOBILE
   A compact figure caption, slightly overlapping the photo.
   ========================================================================== */

@media(max-width:767px){

    .yb-home-field-v32{
        padding-bottom:0;
    }


    .yb-home-field-v32__field-label{
        top:9px;
        right:10px;

        font-size:5.5px;
    }


    .yb-home-field-v32__field-label::before{
        width:18px;
    }


    .yb-home-field-v32__dock{
        width:
            calc(
                100% - 24px
            );

        margin:
            -20px
            auto
            10px;

        padding:
            18px
            17px
            19px;

        grid-template-columns:1fr;

        gap:9px;

        box-shadow:
            0 12px 32px
            rgba(14,19,22,.10);
    }


    .yb-home-field-v32__dock .yb-home-field-v32__eyebrow{
        margin-bottom:0;

        font-size:7px;
    }


    .yb-home-field-v32__dock .yb-home-field-v32__eyebrow::before{
        width:28px;
    }


    .yb-home-field-v32__dock .yb-home-field-v32__title{
        max-width:340px;

        font-size:
            clamp(
                31px,
                9vw,
                39px
            );

        line-height:.97;
    }


    .yb-home-field-v32__dock .yb-home-field-v32__statement{
        max-width:420px;

        font-size:11px;
        line-height:1.55;
    }


    .yb-home-field-v32__dock .yb-home-field-v32__link{
        margin-top:2px;

        font-size:9px;
    }
}


/* ==========================================================================
   05. Home Screen 05 — Partnership Finale
   Source version: v1.4 FINAL Mobile Footer Seam Resolver

   MAINTENANCE
   Final conversion screen. Primary CTA opens Quick Contact when available; secondary CTA routes to Partner Cooperation. Mobile footer seam resolver remains in home.js.

   Ownership
   - CSS lives here: assets/css/pages/home.css
   - Elementor keeps markup only.
   - Do NOT copy this CSS back into the Elementor HTML Widget.
   ========================================================================== */

/* ==========================================================================
   00. TOKENS / ROOT
   ========================================================================== */

#yb-home-finale-v14{
    --yb-graphite:#0b1014;
    --yb-ivory:#f4f3ef;
    --yb-paper:#f8f8f5;
    --yb-red:#e31e24;
    --yb-red-dark:#c9161c;
    --yb-blue:#7195ad;
    --yb-ink:#101519;
    --yb-mid:#58656c;
    --yb-soft:#808a8f;
    --yb-line:rgba(27,38,43,.10);

    position:relative;

    width:100%;

    margin:0;
    padding:0;

    min-height:420px;

    overflow:hidden;
    isolation:isolate;

    color:var(--yb-ink);

    background:
        linear-gradient(
            180deg,
            #f8f8f5 0%,
            #f2f1ed 100%
        );

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/*
 * Mobile Footer seam resolver adds this class to the real site Footer only
 * when a measurable blank gap exists after Screen 05.
 */
@media(max-width:767px){
    .yb-home-finale-v14-footer-seam-fixed{
        position:relative !important;
    }
}


#yb-home-finale-v14,
#yb-home-finale-v14 *,
#yb-home-finale-v14 *::before,
#yb-home-finale-v14 *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   01. SCREEN 04 → SCREEN 05 HANDOFF
   ========================================================================== */

.yb-home-finale-v14__transition{
    position:absolute;

    z-index:5;

    left:0;
    right:0;
    top:0;

    height:34px;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(8,11,14,.18) 0%,
            rgba(31,38,41,.055) 38%,
            rgba(244,243,239,0) 100%
        );
}


/* ==========================================================================
   02. QUIET BACKGROUND LANGUAGE
   ========================================================================== */

.yb-home-finale-v14__field{
    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

    pointer-events:none;
}


.yb-home-finale-v14__field::before{
    content:"";

    position:absolute;

    left:-14%;
    top:14%;

    width:58%;
    height:66%;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(113,149,173,.095) 0%,
            rgba(113,149,173,.032) 42%,
            transparent 72%
        );

    filter:blur(44px);
}


.yb-home-finale-v14__field::after{
    content:"";

    position:absolute;

    right:-16%;
    bottom:-34%;

    width:58%;
    height:92%;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(227,30,36,.054) 0%,
            rgba(195,75,86,.018) 44%,
            transparent 72%
        );

    filter:blur(50px);
}


/* ==========================================================================
   03. OPTICAL CURVES
   ========================================================================== */

.yb-home-finale-v14__curve{
    position:absolute;

    z-index:1;

    pointer-events:none;

    border:
        1px solid
        rgba(103,132,149,.11);

    border-radius:50%;
}


.yb-home-finale-v14__curve--left{
    left:-18%;
    top:12%;

    width:68%;
    height:84%;

    transform:
        rotate(-9deg)
        scaleY(.38);
}


.yb-home-finale-v14__curve--right{
    right:-20%;
    top:4%;

    width:72%;
    height:90%;

    border-color:
        #e31e24;

    transform:
        rotate(10deg)
        scaleY(.36);
}


/* ==========================================================================
   04. QUIET BRAND WATERMARK
   ========================================================================== */

.yb-home-finale-v14__mark{
    position:absolute;

    z-index:1;

    right:
        clamp(
            -92px,
            -4vw,
            -42px
        );

    bottom:
        clamp(
            -106px,
            -7vw,
            -58px
        );

    width:
        clamp(
            310px,
            29vw,
            470px
        );

    aspect-ratio:1 / 1;

    background-image:
        url("/wp-content/uploads/2026/08/yubeen-brand-icon-official.webp");

    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    opacity:.026;

    filter:
        grayscale(1)
        brightness(.36);

    transform:
        rotate(-4deg)
        scale(1.025);

    pointer-events:none;

    transition:
        opacity .8s ease,
        transform 1s cubic-bezier(.22,1,.36,1);
}


#yb-home-finale-v14.is-visible
.yb-home-finale-v14__mark{
    opacity:.042;

    transform:
        rotate(-4deg)
        scale(1);
}


/* ==========================================================================
   05. GRAIN
   ========================================================================== */

.yb-home-finale-v14__grain{
    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    opacity:.016;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            rgba(27,36,41,.52) 0 1px,
            transparent 1px 4px
        );

    background-size:
        9px 9px;
}


/* ==========================================================================
   06. MAIN FRAME
   ========================================================================== */

.yb-home-finale-v14__frame{
    position:relative;

    z-index:10;

    width:
        min(
            calc(100% - 64px),
            1440px
        );

    min-height:420px;

    margin:0 auto;

    padding:
        58px
        0
        28px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
}


/* ==========================================================================
   07. EYEBROW
   ========================================================================== */

.yb-home-finale-v14__eyebrow{
    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    color:
        #161f24;

    font-size:8px;
    line-height:1;
    font-weight:780;
    letter-spacing:.17em;

    text-transform:uppercase;

    opacity:0;

    transform:
        translateY(12px);

    transition:
        opacity .58s ease,
        transform .72s cubic-bezier(.22,1,.36,1);
}


.yb-home-finale-v14__eyebrow::before{
    content:"";

    width:34px;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--yb-blue) 0%,
            #acc1cd 39%,
            var(--yb-red) 78%,
            #ef8057 100%
        );
}


#yb-home-finale-v14.is-visible
.yb-home-finale-v14__eyebrow{
    opacity:1;

    transform:
        translateY(0);
}


/* ==========================================================================
   08. TITLE
   ========================================================================== */

.yb-home-finale-v14__title{
    max-width:900px;

    margin:0;

    color:var(--yb-ink);

    font-size:
        clamp(
            50px,
            5.15vw,
            74px
        );

    line-height:.94;

    font-weight:620;

    letter-spacing:-.057em;

    opacity:0;

    transform:
        translateY(15px);

    transition:
        opacity .62s .05s ease,
        transform .76s .05s cubic-bezier(.22,1,.36,1);
}


.yb-home-finale-v14__title span,
.yb-home-finale-v14__title em{
    display:block;
}


.yb-home-finale-v14__title em{
    margin-top:4px;

    color:#536169;

    font-style:normal;

    font-weight:510;
}


#yb-home-finale-v14.is-visible
.yb-home-finale-v14__title{
    opacity:1;

    transform:
        translateY(0);
}


/* ==========================================================================
   09. STATEMENT
   ========================================================================== */

.yb-home-finale-v14__statement{
    max-width:650px;

    margin:
        17px
        auto
        0;

    color:
        #1c272c;

    font-size:
        clamp(
            12px,
            .9vw,
            14px
        );

    line-height:1.56;

    letter-spacing:-.005em;

    opacity:0;

    transform:
        translateY(12px);

    transition:
        opacity .58s .10s ease,
        transform .72s .10s cubic-bezier(.22,1,.36,1);
}


#yb-home-finale-v14.is-visible
.yb-home-finale-v14__statement{
    opacity:1;

    transform:
        translateY(0);
}


/* ==========================================================================
   10. ACTIONS
   ========================================================================== */

.yb-home-finale-v14__actions{
    margin-top:21px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:11px;

    flex-wrap:wrap;

    opacity:0;

    transform:
        translateY(10px);

    transition:
        opacity .58s .16s ease,
        transform .72s .16s cubic-bezier(.22,1,.36,1);
}


#yb-home-finale-v14.is-visible
.yb-home-finale-v14__actions{
    opacity:1;

    transform:
        translateY(0);
}


.yb-home-finale-v14__primary,
.yb-home-finale-v14__secondary{
    min-height:44px;

    padding:
        0
        18px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    border-radius:999px;

    text-decoration:none;

    font-size:10px;
    line-height:1;
    font-weight:720;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}


.yb-home-finale-v14__primary{
    gap:9px;

    border:
        1px solid
        rgba(227,30,36,.08);

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #e9272e,
            #ca151b
        );

    box-shadow:
        0 10px 24px
        rgba(180,20,26,.15);
}


.yb-home-finale-v14__primary:hover{
    transform:
        translateY(-1px);

    box-shadow:
        0 14px 29px
        rgba(180,20,26,.21);
}


.yb-home-finale-v14__primary svg{
    width:12px;
    height:12px;

    display:block;

    fill:none;

    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        transform .18s ease;
}


.yb-home-finale-v14__primary:hover svg{
    transform:
        translateX(2px);
}


.yb-home-finale-v14__secondary{
    border:
        1px solid
        rgba(22,31,36,.15);

    color:
        #161f24;

    background:
        rgba(255,255,255,.40);
}


.yb-home-finale-v14__secondary:hover{
    transform:
        translateY(-1px);

    color:#161d21;

    background:
        rgba(255,255,255,.78);

    border-color:
        #161f24;
}


/* keyboard accessibility */
.yb-home-finale-v14__primary:focus-visible,
.yb-home-finale-v14__secondary:focus-visible{
    outline:
        3px solid
        rgba(227,30,36,.20);

    outline-offset:3px;
}


/* ==========================================================================
   11. CAPABILITY RAIL
   ========================================================================== */

.yb-home-finale-v14__rail{
    width:100%;

    margin-top:auto;

    padding-top:30px;

    opacity:0;

    transform:
        translateY(8px);

    transition:
        opacity .60s .22s ease,
        transform .72s .22s cubic-bezier(.22,1,.36,1);
}


#yb-home-finale-v14.is-visible
.yb-home-finale-v14__rail{
    opacity:1;

    transform:
        translateY(0);
}


.yb-home-finale-v14__rail-line{
    position:relative;

    width:100%;
    height:1px;

    overflow:hidden;

    background:
        rgba(26,37,42,.095);
}


.yb-home-finale-v14__rail-line::before{
    content:"";

    position:absolute;

    inset:0;

    transform:
        scaleX(0);

    transform-origin:
        center center;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(113,149,173,.55) 14%,
            rgba(78,96,106,.18) 36%,
            rgba(227,30,36,.42) 67%,
            rgba(239,128,87,.24) 84%,
            transparent 100%
        );

    transition:
        transform 1.05s .28s
        cubic-bezier(.22,1,.36,1);
}


#yb-home-finale-v14.is-visible
.yb-home-finale-v14__rail-line::before{
    transform:
        scaleX(1);
}


.yb-home-finale-v14__rail-items{
    margin:
        12px
        0
        0;

    padding:0;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:20px;

    list-style:none;
}


.yb-home-finale-v14__rail-item{
    display:flex;

    align-items:center;

    gap:8px;

    color:
        #172126;

    font-size:7px;
    line-height:1.2;
    font-weight:730;
    letter-spacing:.09em;

    text-transform:uppercase;
}


.yb-home-finale-v14__rail-item:nth-child(2),
.yb-home-finale-v14__rail-item:nth-child(3){
    justify-content:center;
}


.yb-home-finale-v14__rail-item:last-child{
    justify-content:flex-end;
}


.yb-home-finale-v14__rail-item::before{
    content:"";

    width:4px;
    height:4px;

    flex:0 0 auto;

    border-radius:50%;

    background:
        var(--yb-red);

    opacity:.72;
}


/* ==========================================================================
   12. FOOTER HANDOFF
   ========================================================================== */

.yb-home-finale-v14__footer-handoff{
    position:absolute;

    z-index:20;

    left:0;
    right:0;
    bottom:0;

    height:5px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            var(--yb-graphite) 0%,
            #141b20 36%,
            #17191b 62%,
            var(--yb-graphite) 100%
        );

    opacity:.10;
}


/* ==========================================================================
   13. TABLET
   ========================================================================== */

@media(max-width:1024px){

    #yb-home-finale-v14{
        min-height:410px;
    }


    .yb-home-finale-v14__frame{
        width:
            min(
                calc(100% - 44px),
                1040px
            );

        min-height:410px;

        padding:
            52px
            0
            26px;
    }


    .yb-home-finale-v14__title{
        max-width:760px;

        font-size:
            clamp(
                46px,
                7vw,
                62px
            );
    }


    .yb-home-finale-v14__statement{
        max-width:590px;
    }


    .yb-home-finale-v14__mark{
        right:-88px;
        bottom:-84px;

        width:
            clamp(
                280px,
                36vw,
                390px
            );
    }
}


/* ==========================================================================
   14. MOBILE
   ========================================================================== */

@media(max-width:767px){

    #yb-home-finale-v14{
        min-height:0;
    }


    .yb-home-finale-v14__transition{
        height:24px;
    }


    .yb-home-finale-v14__frame{
        width:
            calc(
                100% - 34px
            );

        min-height:0;

        padding:
            45px
            0
            24px;
    }


    .yb-home-finale-v14__eyebrow{
        margin-bottom:12px;

        gap:8px;

        font-size:7px;
    }


    .yb-home-finale-v14__eyebrow::before{
        width:28px;
    }


    .yb-home-finale-v14__title{
        max-width:390px;

        font-size:
            clamp(
                36px,
                10.2vw,
                44px
            );

        line-height:.96;

        letter-spacing:-.052em;
    }


    .yb-home-finale-v14__title em{
        margin-top:3px;
    }


    .yb-home-finale-v14__statement{
        max-width:350px;

        margin-top:14px;

        font-size:11.5px;

        line-height:1.52;
    }


    .yb-home-finale-v14__actions{
        margin-top:18px;

        gap:9px;
    }


    .yb-home-finale-v14__primary,
    .yb-home-finale-v14__secondary{
        min-height:42px;

        padding:
            0
            15px;

        font-size:9.4px;
    }


    .yb-home-finale-v14__rail{
        margin-top:28px;

        padding-top:0;
    }


    .yb-home-finale-v14__rail-items{
        margin-top:11px;

        grid-template-columns:
            repeat(2,1fr);

        gap:
            10px
            14px;
    }


    .yb-home-finale-v14__rail-item,
    .yb-home-finale-v14__rail-item:nth-child(2),
    .yb-home-finale-v14__rail-item:nth-child(3),
    .yb-home-finale-v14__rail-item:last-child{
        justify-content:flex-start;

        font-size:6.3px;

        letter-spacing:.075em;
    }


    .yb-home-finale-v14__mark{
        right:-112px;
        bottom:-100px;

        width:310px;

        opacity:.020;
    }


    #yb-home-finale-v14.is-visible
    .yb-home-finale-v14__mark{
        opacity:.030;
    }


    .yb-home-finale-v14__curve{
        opacity:.56;
    }
}


/* ==========================================================================
   15. SMALL MOBILE
   ========================================================================== */

@media(max-width:430px){

    .yb-home-finale-v14__frame{
        padding:
            42px
            0
            22px;
    }


    .yb-home-finale-v14__title{
        max-width:350px;

        font-size:
            clamp(
                35px,
                10.5vw,
                41px
            );
    }


    .yb-home-finale-v14__statement{
        max-width:330px;
    }


    .yb-home-finale-v14__actions{
        width:100%;

        flex-direction:row;

        gap:8px;
    }


    .yb-home-finale-v14__primary,
    .yb-home-finale-v14__secondary{
        min-width:0;

        padding:
            0
            13px;

        white-space:nowrap;
    }


    .yb-home-finale-v14__rail{
        margin-top:25px;
    }
}


/* ==========================================================================
   16. VERY SMALL MOBILE
   ========================================================================== */

@media(max-width:360px){

    .yb-home-finale-v14__actions{
        flex-direction:column;
    }


    .yb-home-finale-v14__primary,
    .yb-home-finale-v14__secondary{
        width:
            min(
                100%,
                272px
            );
    }
}


/* ==========================================================================
   17. REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce){

    .yb-home-finale-v14__eyebrow,
    .yb-home-finale-v14__title,
    .yb-home-finale-v14__statement,
    .yb-home-finale-v14__actions,
    .yb-home-finale-v14__rail,
    .yb-home-finale-v14__mark,
    .yb-home-finale-v14__rail-line::before{
        transition:none !important;
    }


    .yb-home-finale-v14__eyebrow,
    .yb-home-finale-v14__title,
    .yb-home-finale-v14__statement,
    .yb-home-finale-v14__actions,
    .yb-home-finale-v14__rail{
        opacity:1 !important;

        transform:none !important;
    }


    .yb-home-finale-v14__mark{
        opacity:.036 !important;

        transform:
            rotate(-4deg)
            scale(1) !important;
    }


    .yb-home-finale-v14__rail-line::before{
        transform:
            scaleX(1) !important;
    }
}


/* ==========================================================================
   90. Home Quick Contact — Controller Shell
   Source version: v1.9 FINAL Owned Dialog Shell

   MAINTENANCE
   Controller owns the floating launcher and dialog shell. Existing initialized CF7 .wpcf7 DOM is moved into the shell. Keep CF7 source widget class yb-qc-cf7-form-widget unchanged.

   Ownership
   - CSS lives here: assets/css/pages/home.css
   - Elementor keeps markup only.
   - Do NOT copy this CSS back into the Elementor HTML Widget.
   ========================================================================== */

/* ==========================================================================
   00. TOKENS
   ========================================================================== */

#yb-qc-v19{
    --yb-qc-red:#e31e24;
    --yb-qc-red-dark:#c9151b;
    --yb-qc-ink:#14191d;
    --yb-qc-mid:#667178;
    --yb-qc-soft:#8e989e;
    --yb-qc-line:rgba(19,27,32,.10);

    position:fixed;
    right:22px;
    bottom:22px;

    z-index:10020;

    width:auto;
    height:auto;

    margin:0;
    padding:0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    pointer-events:none;
}


#yb-qc-v19,
#yb-qc-v19 *,
#yb-qc-v19 *::before,
#yb-qc-v19 *::after{
    box-sizing:border-box;
}


/* ==========================================================================
   01. LAUNCHER
   ========================================================================== */

.yb-qc-v19__dock{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;

    pointer-events:none;
}


.yb-qc-v19__label{
    height:38px;

    padding:
        0
        14px;

    display:flex;
    align-items:center;

    border:
        1px solid
        rgba(18,25,29,.08);

    border-radius:999px;

    background:
        rgba(255,255,255,.98);

    color:#262d31;

    box-shadow:
        0 8px 22px
        rgba(15,21,25,.10);

    font-size:11px;
    line-height:1;
    font-weight:650;

    white-space:nowrap;

    opacity:0;
    visibility:hidden;

    transform:
        translateX(8px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}


#yb-qc-v19.is-hover
.yb-qc-v19__label{
    opacity:1;
    visibility:visible;

    transform:
        translateX(0);
}


.yb-qc-v19__launcher{
    position:relative;

    width:58px;
    height:58px;

    padding:0;

    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #ef2d33 0%,
            #ca151b 100%
        );

    color:#fff;

    box-shadow:
        0 14px 34px
        rgba(180,19,25,.30);

    cursor:pointer;

    pointer-events:auto;

    transition:
        transform .18s ease,
        opacity .18s ease,
        visibility .18s ease,
        box-shadow .18s ease;
}


.yb-qc-v19__launcher::before{
    content:"";

    position:absolute;
    inset:4px;

    border:
        2px solid
        rgba(255,255,255,.95);

    border-radius:50%;
}


.yb-qc-v19__launcher:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 42px
        rgba(180,19,25,.36);
}


.yb-qc-v19__launcher svg{
    width:23px;
    height:23px;

    display:block;
}


/* ==========================================================================
   02. DIALOG SHELL
   ========================================================================== */

.yb-qc-v19__panel{
    position:fixed;

    right:22px;
    bottom:22px;

    z-index:10021;

    width:440px;
    max-width:
        calc(
            100vw - 32px
        );

    max-height:
        calc(
            100dvh - 44px
        );

    padding:
        16px
        17px
        15px;

    overflow:auto;

    border:
        1px solid
        rgba(18,25,29,.09);

    border-radius:21px;

    background:
        linear-gradient(
            180deg,
            rgba(253,251,249,.998),
            rgba(248,246,243,.998)
        );

    box-shadow:
        0 26px 64px
        rgba(13,19,23,.20);

    opacity:0;
    visibility:hidden;

    transform:
        translateY(10px)
        scale(.988);

    transform-origin:
        right bottom;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

    pointer-events:none;

    overscroll-behavior:contain;
}


#yb-qc-v19.is-open
.yb-qc-v19__panel{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events:auto;
}


#yb-qc-v19.is-open
.yb-qc-v19__launcher,
#yb-qc-v19.is-open
.yb-qc-v19__label{
    opacity:0;
    visibility:hidden;

    transform:
        scale(.88);

    pointer-events:none;
}


/* ==========================================================================
   03. HEADER
   ========================================================================== */

.yb-qc-v19__head{
    display:grid;

    grid-template-columns:
        35px
        minmax(0,1fr)
        29px;

    align-items:start;

    column-gap:10px;

    padding-bottom:11px;

    border-bottom:
        1px solid
        var(--yb-qc-line);
}


.yb-qc-v19__badge{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(18,25,29,.075);

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 7px 16px
        rgba(17,23,27,.055);
}


.yb-qc-v19__badge svg{
    width:16px;
    height:16px;

    display:block;
}


.yb-qc-v19__meta{
    min-width:0;
}


.yb-qc-v19__eyebrow{
    margin:
        0
        0
        2px;

    color:
        var(--yb-qc-red);

    font-size:7.5px;
    line-height:1;

    font-weight:760;

    letter-spacing:.13em;

    text-transform:uppercase;
}


.yb-qc-v19__title{
    margin:0;

    color:
        var(--yb-qc-ink);

    font-size:18px;
    line-height:1.05;

    font-weight:720;

    letter-spacing:-.025em;
}


.yb-qc-v19__intro{
    margin:
        4px
        0
        0;

    color:
        var(--yb-qc-mid);

    font-size:11.5px;
    line-height:1.34;
}


.yb-qc-v19__close{
    width:29px;
    height:29px;

    padding:0;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(18,25,29,.08);

    border-radius:50%;

    background:
        rgba(255,255,255,.94);

    color:#727d82;

    box-shadow:none;

    cursor:pointer;

    transition:
        transform .15s ease,
        background .15s ease,
        color .15s ease;
}


.yb-qc-v19__close:hover{
    color:#20272b;

    background:#eeede9;

    transform:
        rotate(90deg);
}


.yb-qc-v19__close svg{
    width:12px;
    height:12px;

    display:block;
}


/* ==========================================================================
   04. CF7 MOUNT RESET
   ========================================================================== */

.yb-qc-v19__body{
    margin:
        10px
        0
        0;

    padding:0;
}


.yb-qc-v19__body
.wpcf7,
.yb-qc-v19__body
.wpcf7-form{
    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    background:none !important;

    box-shadow:none !important;
}


.yb-qc-v19__body p{
    margin:0 !important;
    padding:0 !important;
}


.yb-qc-v19__body br{
    display:none !important;
}


/* ==========================================================================
   05. REAL CF7 FORM
   ========================================================================== */

.yb-qc-v19__body
.yb-qc-form{
    display:grid !important;

    gap:10px !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
}


.yb-qc-v19__body
.yb-qc-field{
    display:grid !important;

    gap:5px !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
}


.yb-qc-v19__body
.yb-qc-field > label{
    margin:0 !important;
    padding:0 !important;

    color:#414a4f !important;

    font-size:11px !important;
    line-height:1.2 !important;

    font-weight:650 !important;
}


.yb-qc-v19__body
.wpcf7-form-control-wrap{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
}


.yb-qc-v19__body
input.yb-qc-input{
    display:block !important;

    width:100% !important;

    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;

    margin:0 !important;

    padding:
        0
        13px !important;

    border:
        1px solid
        #d6dcdf !important;

    border-radius:13px !important;

    outline:none !important;

    background:
        rgba(255,255,255,.99) !important;

    color:
        #1d2428 !important;

    box-shadow:none !important;

    font-family:inherit !important;

    font-size:13px !important;
    line-height:42px !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.yb-qc-v19__body
textarea.yb-qc-textarea{
    display:block !important;

    width:100% !important;

    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    margin:0 !important;

    padding:
        10px
        13px !important;

    border:
        1px solid
        #d6dcdf !important;

    border-radius:13px !important;

    outline:none !important;

    resize:none !important;

    background:
        rgba(255,255,255,.99) !important;

    color:
        #1d2428 !important;

    box-shadow:none !important;

    font-family:inherit !important;

    font-size:13px !important;
    line-height:1.4 !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.yb-qc-v19__body
input.yb-qc-input::placeholder,
.yb-qc-v19__body
textarea.yb-qc-textarea::placeholder{
    color:
        #98a2a7 !important;

    opacity:1 !important;
}


.yb-qc-v19__body
input.yb-qc-input:focus,
.yb-qc-v19__body
textarea.yb-qc-textarea:focus{
    border-color:
        #e31e24 !important;

    box-shadow:
        0 0 0 3px
        rgba(227,30,36,.055) !important;
}


.yb-qc-v19__body
.wpcf7-not-valid-tip{
    display:block !important;

    margin:
        3px
        0
        0 !important;

    color:
        #b91f24 !important;

    font-size:9.5px !important;
    line-height:1.2 !important;
}


/* ==========================================================================
   06. FORM ACTION ROW
   ========================================================================== */

.yb-qc-v19__body
.yb-qc-bottom{
    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:10px !important;

    margin:0 !important;
    padding:0 !important;
}


.yb-qc-v19__body
.yb-qc-note{
    margin:0 !important;
    padding:0 !important;

    color:
        var(--yb-qc-soft) !important;

    font-size:9.5px !important;
    line-height:1.3 !important;
}


.yb-qc-v19__body
input.yb-qc-submit{
    display:block !important;

    width:auto !important;
    min-width:128px !important;

    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;

    margin:0 !important;

    padding:
        0
        17px !important;

    border:0 !important;

    border-radius:999px !important;

    background:
        linear-gradient(
            135deg,
            #e9272e,
            #ca151b
        ) !important;

    color:#fff !important;

    box-shadow:
        0 9px 22px
        rgba(176,19,25,.17) !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:11px !important;
    line-height:40px !important;

    font-weight:720 !important;

    text-align:center;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.yb-qc-v19__body
input.yb-qc-submit:hover{
    transform:
        translateY(-1px);

    box-shadow:
        0 12px 26px
        rgba(176,19,25,.22) !important;
}


.yb-qc-v19__body
.wpcf7-spinner{
    position:absolute;

    right:4px;
    bottom:5px;

    margin:0 !important;
}


/* ==========================================================================
   07. CF7 RESPONSE
   ========================================================================== */

.yb-qc-v19__body
.wpcf7-response-output{
    margin:
        8px
        0
        0 !important;

    padding:
        8px
        10px !important;

    border:
        1px solid
        rgba(38,150,96,.16) !important;

    border-radius:11px !important;

    background:
        rgba(38,150,96,.07) !important;

    color:
        #246945 !important;

    font-size:10px !important;
    line-height:1.3 !important;
}


.yb-qc-v19__body
form.invalid
.wpcf7-response-output,
.yb-qc-v19__body
form.failed
.wpcf7-response-output,
.yb-qc-v19__body
form.spam
.wpcf7-response-output{
    border-color:
        #e31e24 !important;

    background:
        rgba(227,30,36,.06) !important;

    color:#a71e23 !important;
}


/* ==========================================================================
   08. SOURCE SHORTCODE HOST
   After JS moves .wpcf7 into the dialog, the original Elementor widget is
   empty. Hide it completely so it cannot create page height / flex gap.
   ========================================================================== */

.yb-qc-cf7-form-widget.yb-qc-v19-source-mounted{
    display:none !important;

    width:0 !important;
    height:0 !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    overflow:hidden !important;
}


/* ==========================================================================
   09. TABLET / MOBILE
   ========================================================================== */

@media(max-width:640px){

    #yb-qc-v19{
        right:13px;

        bottom:
            max(
                13px,
                env(safe-area-inset-bottom)
            );
    }


    .yb-qc-v19__label{
        display:none;
    }


    .yb-qc-v19__launcher{
        width:54px;
        height:54px;
    }


    .yb-qc-v19__launcher svg{
        width:21px;
        height:21px;
    }


    .yb-qc-v19__panel{
        left:12px;
        right:12px;

        top:auto;

        bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            );

        width:auto;

        max-width:none;

        max-height:
            calc(
                100dvh - 24px
            );

        padding:
            13px
            13px
            12px;

        border-radius:18px;
    }


    .yb-qc-v19__head{
        grid-template-columns:
            32px
            minmax(0,1fr)
            27px;

        column-gap:8px;

        padding-bottom:9px;
    }


    .yb-qc-v19__badge{
        width:32px;
        height:32px;
    }


    .yb-qc-v19__badge svg{
        width:15px;
        height:15px;
    }


    .yb-qc-v19__eyebrow{
        font-size:7px;
    }


    .yb-qc-v19__title{
        font-size:16px;
    }


    .yb-qc-v19__intro{
        margin-top:3px;

        font-size:10.8px;
        line-height:1.28;
    }


    .yb-qc-v19__body{
        margin-top:9px;
    }


    .yb-qc-v19__body
    .yb-qc-form{
        gap:8px !important;
    }


    .yb-qc-v19__body
    .yb-qc-field{
        gap:4px !important;
    }


    .yb-qc-v19__body
    .yb-qc-field > label{
        font-size:10.5px !important;
    }


    /*
     * 16px prevents iOS Safari auto-zoom when inputs receive focus.
     */
    .yb-qc-v19__body
    input.yb-qc-input{
        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;

        padding:
            0
            12px !important;

        font-size:16px !important;
        line-height:40px !important;
    }


    .yb-qc-v19__body
    textarea.yb-qc-textarea{
        height:82px !important;
        min-height:82px !important;
        max-height:82px !important;

        padding:
            9px
            12px !important;

        font-size:16px !important;
        line-height:1.34 !important;
    }


    .yb-qc-v19__body
    .yb-qc-bottom{
        gap:8px !important;
    }


    .yb-qc-v19__body
    .yb-qc-note{
        font-size:8.8px !important;

        line-height:1.25 !important;
    }


    .yb-qc-v19__body
    input.yb-qc-submit{
        min-width:118px !important;

        height:39px !important;
        min-height:39px !important;
        max-height:39px !important;

        padding:
            0
            13px !important;

        font-size:10.5px !important;
        line-height:39px !important;
    }
}


/* ==========================================================================
   10. SHORT MOBILE / LANDSCAPE
   ========================================================================== */

@media(max-width:640px) and (max-height:620px){

    .yb-qc-v19__intro{
        display:none;
    }


    .yb-qc-v19__head{
        padding-bottom:7px;
    }


    .yb-qc-v19__body{
        margin-top:7px;
    }


    .yb-qc-v19__body
    .yb-qc-form{
        gap:7px !important;
    }


    .yb-qc-v19__body
    textarea.yb-qc-textarea{
        height:66px !important;
        min-height:66px !important;
        max-height:66px !important;
    }
}


/* ==========================================================================
   11. VERY SMALL MOBILE
   ========================================================================== */

@media(max-width:360px){

    .yb-qc-v19__panel{
        left:8px;
        right:8px;

        padding:
            12px
            11px
            11px;
    }


    .yb-qc-v19__body
    .yb-qc-note{
        font-size:8.2px !important;
    }


    .yb-qc-v19__body
    input.yb-qc-submit{
        min-width:108px !important;

        padding:
            0
            11px !important;
    }
}


/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce){

    .yb-qc-v19__label,
    .yb-qc-v19__launcher,
    .yb-qc-v19__panel,
    .yb-qc-v19__close{
        transition:none !important;
    }
}

/* ==========================================================================
   HOME SCREEN 02 — TABLET LENS ANCHOR CORRECTION R3
   Date: 2026-08-20

   WHY R2 DID NOT MOVE THE IMAGE ENOUGH
   ------------------------------------
   R2 targeted only 768–1024 CSS pixels. A physical tablet screenshot can be
   much wider in device pixels while the browser's CSS viewport is still below
   768px because of devicePixelRatio / browser viewport scaling. In that case
   the page continued to use the later Mobile rule:

       .yb-home-optics-v13__asset-picture { top:154px; }

   Therefore the R2 Tablet rule at top:112px never controlled the image on that
   device.

   R3 deliberately covers BOTH tablet viewport families:

   A) 768–1024 CSS px
      - true CSS-tablet range
      - move the optical asset up strongly: 112px -> 64px

   B) 540–767 CSS px
      - compact-tablet / high-DPR tablet range
      - this range would otherwise inherit the Mobile top:154px rule
      - move the optical asset up strongly: 154px -> 96px

   IMPORTANT MAINTENANCE RULES
   ---------------------------
   - These overrides are intentionally placed at the END of home.css so they
     win over the earlier Screen 02 Mobile rules by normal cascade order.
   - <=539px remains the approved phone layout and is not changed here.
   - Desktop >=1025px remains unchanged.
   - Image width remains proportional and height remains auto: no distortion.
   - Do not replace this with object-position. The transparent lens asset has
     almost the same ratio as its stage, so object-position has too little free
     space to create a meaningful vertical move.
   ========================================================================== */

/* True tablet CSS viewport. */
@media (min-width:768px) and (max-width:1024px){

    .yb-home-optics-v13__asset-picture{
        top:64px;
    }
}


/*
 * Compact/high-DPR tablet viewport.
 * This intentionally overrides the earlier <=767px Mobile top:154px rule.
 * Phones <=539px keep the already-approved Mobile calibration.
 */
@media (min-width:540px) and (max-width:767px){

    .yb-home-optics-v13__asset-picture{
        top:96px;
    }
}