/* =====================================================================
   Rootz brand layer — sits on top of the Mivon template (light mode only)
   Brand red: #E10000  |  Ink: #161616  |  Soft surfaces: #F4F4F4 / #FCECEA
   ===================================================================== */
:root{
    --rz-red: #E10000;
    --rz-red-dark: #B80000;
    --rz-ink: #161616;
    --rz-muted: #585858;
    --rz-soft: #F4F4F4;
    --rz-blush: #FCECEA;
}
::selection{
    background: var(--rz-red);
    color: #fff;
}
body.light .sub-bg{
    background: var(--rz-soft);
}
body.light .main-color,.main-color{
    color: var(--rz-red) !important;
}
/* Keyboard focus (WCAG 2.2) */
a:focus-visible,button:focus-visible{
    outline: 2px solid var(--rz-red);
    outline-offset: 3px;
}
/* ---------- Loader / cursor / progress ---------- */
.loader-wrap svg path{
    fill: var(--rz-red);
}
body.light .loader-wrap .loader-wrap-heading .load-text{
    color: #fff;
}
.cursor{
    border-color: var(--rz-red) !important;
}
.cursor.cursor-active{
    background: rgba(225, 0, 0, 0.12) !important;
}
body.light .progress-wrap svg.progress-circle path{
    stroke: var(--rz-red);
}
/* ---------- Logo ---------- */
.rootz-logo{
    display: block;
    width: 100%;
    height: auto;
}
/* Same height as the menu pill (65px); square corners like the brand logo */
.navbar .logo{
    flex: 0 0 auto;
    height: 65px;
    border-radius: 0;
    overflow: hidden;
    margin-top: 10px;
    align-self: flex-start;
}
.navbar .logo .rootz-logo{
    height: 100%;
    width: auto;
}
.navbar .nav-cta{
    align-self: flex-start;
}
/* Hire Talent CTA: same height + radius as the menu pill */
.navbar .nav-cta .rz-btn{
    height: 65px;
    padding: 0 30px;
    border-radius: 15px;
    font-size: 14px;
}
/* ---------- Navbar ---------- */
.navbar .navbar-nav{
    background: rgba(22, 22, 22, 0.88);
}
.navbar .navbar-nav .nav-link{
    margin: 0 9px;
    font-size: 13px;
}
.navbar .navbar-nav .nav-link:hover,.navbar .navbar-nav .nav-link.active{
    color: #fff;
}
.navbar .dropdown-menu .dropdown-item:hover{
    color: var(--rz-red);
}
.navbar .nav-cta{
    margin-top: 10px;
}
/* ---------- Buttons ---------- */
.rz-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid var(--rz-red);
    background: var(--rz-red);
    color: #fff;
    transition: all 0.35s;
    white-space: nowrap;
}
.rz-btn:hover{
    background: var(--rz-ink);
    border-color: var(--rz-ink);
    color: #fff;
}
.rz-btn svg{
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
.rz-btn.outline{
    background: transparent;
    color: var(--rz-ink);
    border-color: rgba(22, 22, 22, 0.35);
}
.rz-btn.outline:hover{
    background: var(--rz-ink);
    color: #fff;
}
.rz-btn.white{
    background: #fff;
    border-color: #fff;
    color: var(--rz-ink);
}
.rz-btn.white:hover{
    background: var(--rz-ink);
    border-color: var(--rz-ink);
    color: #fff;
}
.rz-btn.sm{
    padding: 11px 20px;
    font-size: 12px;
}
body.light .butn-bord-sm:before{
    background: var(--rz-red);
}
/* ---------- Hero (light) ---------- */
body.light .hero-style3{
    background:
        radial-gradient(900px 500px at 88% 8%, rgba(225, 0, 0, 0.10), transparent 60%),
        radial-gradient(700px 420px at 0% 30%, rgba(225, 0, 0, 0.05), transparent 60%),
        #fff;
    color: var(--rz-ink);
}
body.light .hero-style3:after{
    display: none;
}
body.light .hero-style3 p{
    color: var(--rz-muted);
}
.hero-style3 .hero-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rz-ink);
    padding: 9px 18px;
    border: 1px solid rgba(22, 22, 22, 0.15);
    border-radius: 30px;
    background: #fff;
}
.hero-style3 .hero-eyebrow i{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rz-red);
    display: inline-block;
}
.hero-style3 .main-marq .box .item h4{
    color: var(--rz-ink);
}
body.light .portfolio-elegant .item .cont span{
    color: var(--rz-muted);
}
.portfolio-elegant .item .bg-img .rz-card-tag{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--rz-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.portfolio-elegant .item .bg-img .rz-card-tag.red{
    background: var(--rz-red);
    color: #fff;
}
.portfolio-elegant .item .bg-img:after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.35));
    pointer-events: none;
}
/* ---------- About ---------- */
/* ---------- Journeys (stacking cards) ---------- */
.serv-style2 .item .cont .rz-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
}
.serv-style2 .item .cont .rz-link svg{
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s;
}
.serv-style2 .item .cont .rz-link:hover svg{
    transform: translateX(4px);
}
/* red card: white text */
body.light .bg-light.main-colorbg{
    background: var(--rz-red) !important;
    color: #fff !important;
}
body.light .bg-light.main-colorbg p{
    color: rgba(255, 255, 255, 0.85);
}
body.light .serv-style2 .item.main-colorbg .cont .tags span{
    border-color: rgba(255, 255, 255, 0.55);
}
body.light .serv-style2 .item.main-colorbg .cont .tags span:hover{
    background: #fff;
    color: var(--rz-red);
}
/* blush card */
body.light .serv-style2 .item.rz-blush{
    background: var(--rz-blush);
}
body.light .serv-style2 .item.rz-blush .cont .tags span{
    border-color: rgba(0, 0, 0, 0.4);
}
/* ---------- Process (features) ---------- */
/* ---------- Marquee ---------- */
.main-marq .rz-star{
    width: 60px;
    color: var(--rz-red);
}
.main-marq .rz-star svg{
    width: 100%;
    height: auto;
    fill: currentColor;
}
/* ---------- Trust bento (intro-style3) ---------- */
/* ---------- Role categories (team-reval) ---------- */
/* Overlay link sits after the reveal image (the template's hover script moves children[1]) */
/* ---------- Commitments (testim-style3) ---------- */
/* ---------- Insights ---------- */
/* ---------- Footer / final conversion ---------- */
/* ---------- Responsive ---------- */
@media screen and (max-width: 1199px){.navbar .navbar-nav .nav-link{
        margin: 0 5px;
        font-size: 12px;
    }
}
@media screen and (max-width: 991px){.navbar .logo{
        margin-top: 10px;
        height: 50px;
        border-radius: 0;
    }
.navbar .navbar-nav{
        background: #fff;
    }
.navbar .navbar-nav .nav-link{
        color: var(--rz-ink);
    }
.navbar .icon-bar{
        color: var(--rz-ink);
    }
.navbar .nav-cta{
        display: none;
    }
}
/* ---------- Fixes after review ---------- */
/* =====================================================================
   v2 — Header redesign + full responsive pass
   ===================================================================== */
html,body{ max-width: 100%; overflow-x: clip; }
img,svg,video{ max-width: 100%; }
/* ---------- Full-width layout ---------- */
:root{ --rz-gutter: clamp(18px, 4vw, 72px); }
/* Header spans the whole viewport */
.navbar{ left: 0; right: 0; width: 100%; }
.navbar .container{
    max-width: none !important;
    width: 100%;
    padding-left: var(--rz-gutter);
    padding-right: var(--rz-gutter);
}
/* Page content: fluid with consistent side gutters instead of a fixed 1320px box */
main .container,footer .container{
    max-width: none !important;
    width: 100%;
    padding-left: var(--rz-gutter);
    padding-right: var(--rz-gutter);
}
/* Parallax banner and footer panel go edge to edge (with gutter) */
@media (max-width: 991px){.navbar .container{ padding-left: 16px; padding-right: 16px; }
}
/* ---------- Skip link + reduced motion ---------- */
.rz-skip{
    position: fixed;
    left: 16px;
    top: -60px;
    z-index: 100000;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--rz-ink);
    color: #fff;
    font-weight: 600;
    transition: top 0.2s;
}
.rz-skip:focus{ top: 12px; color: #fff; }
@media (prefers-reduced-motion: reduce){*,*::before,*::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ---------- Header extras ---------- */
.navbar .nav-cta{ display: flex; align-items: center; gap: 10px; }
.navbar .nav-cta-mobile .rz-btn.outline{ margin-top: 10px; }
/* ---------- Choose your path / coverage ---------- */
.rz-choose{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: 36px;
}
.rz-choose-title{ font-size: clamp(26px, 3.4vw, 44px); font-weight: 400; margin-top: 16px; max-width: 640px; }
.rz-choose-note{ max-width: 340px; margin: 0; font-size: 15px; }
/* ---------- Trust & transparency ---------- */
/* ---------- Footer additions ---------- */
@media (max-width: 991px){.rz-choose{ flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
.rz-choose-note{ max-width: none; }
}
/* ---------- Header (desktop >= 992px) ---------- */
.navbar{
    position: fixed;
    top: 0;
    padding: 14px 0 !important;
    transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
    border-bottom: 0;
}
.navbar.nav-scroll{
    position: fixed;
    top: 0;
    transform: none;
    transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
.navbar.rz-scrolled{
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 8px 0 !important;
}
.navbar .container{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
}
.navbar .logo,.navbar .nav-cta{
    margin-top: 0;
    align-self: center;
}
.navbar .logo{ height: 54px; transition: height 0.35s; }
.navbar.rz-scrolled .logo{ height: 46px; }
.navbar .navbar-collapse{ flex: 1 1 auto; min-width: 0; justify-content: center; }
.navbar .navbar-nav{
    margin-top: 0;
    padding: 0 8px;
    align-items: center;
    background: rgba(22, 22, 22, 0.92);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.navbar .navbar-nav .nav-link{
    padding: 14px 12px 10px;
    margin: 0 2px;
    position: relative;
    white-space: nowrap;
}
.navbar .navbar-nav .nav-link::after{
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--rz-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}
.navbar .navbar-nav .nav-link:hover::after,.navbar .navbar-nav .nav-link.active::after,.navbar .navbar-nav .dropdown:hover > .nav-link::after{ transform: scaleX(1); }
.navbar .dropdown-toggle::after{ display: none; }
.navbar .dropdown-menu{ top: 100%; margin-top: 8px; border-radius: 16px; min-width: 200px; }
.navbar .nav-cta .rz-btn{
    height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(225, 0, 0, 0.25);
}
.navbar .navbar-toggler{ display: none; }
.navbar .nav-cta-mobile{ display: none; }
@media (min-width: 992px) and (max-width: 1199px){.navbar .container{ gap: 14px; }
.navbar .navbar-nav .nav-link{ padding-left: 8px; padding-right: 8px; font-size: 11.5px; letter-spacing: 0.6px; }
.navbar .nav-cta .rz-btn{ padding: 0 18px; font-size: 12px; }
.navbar .logo{ height: 46px; }
}
/* ---------- Header (mobile / tablet < 992px) ---------- */
@media (max-width: 991px){.navbar,.navbar.nav-scroll{
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
    }
.navbar .container{
        position: relative;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        height: 64px;
        padding: 0 16px;
        max-width: 100%;
    }
.navbar .logo,.navbar.rz-scrolled .logo{
        height: 40px;
        max-width: none !important;
        margin: 0 !important;
    }
.navbar .logo .rootz-logo{ height: 100%; width: auto; }
.navbar .navbar-toggler{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 -6px 0 0;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--rz-ink);
    }
.navbar .navbar-toggler:active{ background: var(--rz-soft); }
.navbar .icon-bar{ display: inline-flex; color: var(--rz-ink); }
.navbar .icon-bar .ic-close{ display: none; }
.navbar.rz-open .icon-bar .ic-open{ display: none; }
.navbar.rz-open .icon-bar .ic-close{ display: block; }
.navbar .nav-cta{ display: none; }
.navbar .navbar-collapse{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        margin: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: 0 24px 40px rgba(0, 0, 0, 0.12);
        border-top: 1px solid rgba(0, 0, 0, 0.07);
    }
.navbar .navbar-collapse.show{ display: block; animation: rzMenuIn 0.25s ease-out; }
@keyframes rzMenuIn{
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: none; }
    }
.navbar .navbar-nav{
        display: block;
        margin: 0;
        padding: 8px 16px 24px;
        background: #fff;
        border-radius: 0;
        box-shadow: none;
    }
.navbar .navbar-nav .nav-link{
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 54px;
        margin: 0;
        padding: 0 4px;
        font-size: 15px;
        letter-spacing: 0.8px;
        color: var(--rz-ink);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
.navbar .navbar-nav .nav-item:last-of-type .nav-link{ border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.navbar .navbar-nav .nav-link::after{ display: none; }
.navbar .navbar-nav .nav-link:hover,.navbar .navbar-nav .nav-link.active{ color: var(--rz-red); }
.navbar .dropdown-menu,.navbar .dropdown-menu.show{
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        margin: 0;
        padding: 4px 0 8px 16px;
        min-width: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
.navbar .dropdown-menu{ display: none; }
.navbar .dropdown-menu.show{ display: block; }
.navbar .dropdown-menu .dropdown-item{
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        font-size: 15px;
        color: var(--rz-muted);
    }
.navbar .dropdown-menu .dropdown-item:hover{ padding-left: 12px; color: var(--rz-red); }
.navbar .dropdown-menu .dropdown-item::after{ display: none; }
.navbar .nav-cta-mobile{ display: block; padding-top: 20px; }
.navbar .nav-cta-mobile .rz-btn{ width: 100%; justify-content: center; height: 52px; border-radius: 999px; }
body.rz-menu-open{ overflow: hidden; }
}
@media (max-width: 380px){.navbar .container{ padding: 0 12px; }
.navbar .logo,.navbar.rz-scrolled .logo{ height: 34px; }
}
/* ---------- Hero ---------- */
.hero-style3{ padding: 170px 0 90px; }
.hero-style3 h1{ font-size: clamp(34px, 5.2vw, 64px); line-height: 1.08; }
@media (max-width: 991px){.hero-style3{ padding: 110px 0 60px; text-align: center; }
.hero-style3 .hero-eyebrow{ font-size: 11px; letter-spacing: 1px; padding: 8px 14px; margin-bottom: 18px !important; }
.hero-style3 h1{ margin-top: 0 !important; font-size: clamp(32px, 7.4vw, 52px) !important; }
.hero-style3 .main-marq{ margin-top: 48px !important; }
.hero-style3 .portfolio-elegant{ margin-top: 48px !important; }
}
@media (max-width: 575px){.hero-style3{ padding: 96px 0 48px; }
.hero-style3 .main-marq h4{ font-size: 34px; }
}
/* ---------- Cards, sections ---------- */
@media (max-width: 991px){.portfolio-elegant .item,.portfolio-elegant .item.active{ width: 48.5%; padding: 0 8px; vertical-align: top; }
.portfolio-elegant .item .bg-img,.portfolio-elegant .item.active .bg-img{ height: 300px; }
.portfolio-elegant .work-boxs{ margin: 0 -8px; }
section{ padding-top: 80px; padding-bottom: 80px; }
.serv-style2 .item .cont{ padding: 40px 28px !important; }
.serv-style2 .stackCard{ width: 100%; max-width: 100%; flex: 0 0 100%; }
.main-marq.xlrg h4{ font-size: 48px; }
}
@media (max-width: 575px){section{ padding-top: 64px; padding-bottom: 64px; }
.container{ padding-left: 18px; padding-right: 18px; }
.portfolio-elegant .item,.portfolio-elegant .item.active{ width: 100%; padding: 0; margin-bottom: 22px !important; }
.portfolio-elegant .item .bg-img,.portfolio-elegant .item.active .bg-img{ height: 240px; }
.portfolio-elegant .work-boxs{ margin: 0; }
.main-marq.xlrg h4{ font-size: 34px; }
.main-marq .rz-star{ width: 34px; }
.serv-style2 .item .cont{ padding: 32px 22px !important; }
.serv-style2 .item .fs-60{ font-size: 30px !important; }
.serv-style2 .item .tags span{ margin-bottom: 8px; }
}
/* =====================================================================
   v3 — Floating full-width white header bar (matches approved mock)
   ===================================================================== */
/* Brand lockup */
.navbar .rz-brand{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: auto !important;
    margin: 0 !important;
    overflow: visible;
    color: var(--rz-ink);
    text-decoration: none;
}
/* Official Rootz logo inside the bar */
.navbar .rz-brand{ flex: 0 0 auto; height: 60px !important; border-radius: 0; overflow: hidden; }
.navbar .rz-brand .rootz-logo{ height: 100%; width: auto; max-width: none; }
@media (min-width: 992px) and (max-width: 1399px){.navbar .rz-brand{ height: 52px !important; }
}
@media (max-width: 991px){.navbar .rz-brand{ height: 40px !important; }
}
@media (max-width: 380px){.navbar .rz-brand{ height: 34px !important; }
}
/* Chevrons on dropdown links (plain spans, no rolling text) */
.navbar .dropdown-toggle::after{
    display: inline-block;
    content: "";
    width: 7px;
    height: 7px;
    margin: 0 0 3px 9px;
    vertical-align: middle;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s;
}
.navbar .dropdown:hover > .dropdown-toggle::after{ transform: rotate(225deg); margin-bottom: -2px; }
@media (min-width: 992px){.navbar,.navbar.rz-scrolled,.navbar.nav-scroll{
        padding: 14px var(--rz-gutter) !important;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }
/* the white bar */
.navbar .container{
        max-width: none !important;
        width: 100%;
        min-height: 80px;
        padding: 12px 20px !important;
        gap: 0;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 10px 40px rgba(225, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.3s, min-height 0.3s;
    }
.navbar.rz-scrolled .container{
        min-height: 68px;
        box-shadow: 0 14px 44px rgba(0, 0, 0, 0.14), 0 2px 10px rgba(0, 0, 0, 0.06);
    }
.navbar .navbar-collapse{
        flex: 1 1 auto;
        justify-content: space-between;
        margin: 0 24px 0 28px;
        padding: 0 8px 0 28px;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
.navbar .navbar-nav{
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        justify-content: space-between;
        flex-direction: row;
    }
.navbar .navbar-nav .nav-link{
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 10px 6px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: #0f1226;
    }
.navbar .navbar-nav .nav-link:hover,.navbar .navbar-nav .dropdown:hover > .nav-link{ color: var(--rz-red); }
.navbar .navbar-nav .nav-link::after{ display: none; }
.navbar .navbar-nav .dropdown-toggle::after{ display: inline-block; }
.navbar .nav-cta{
        padding-left: 24px;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        gap: 14px;
    }
.navbar .nav-cta .rz-btn{
        height: 56px;
        padding: 0 28px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        box-shadow: none;
    }
.navbar .nav-cta .rz-btn.outline{ border: 1.5px solid #0f1226; color: #0f1226; background: #fff; }
.navbar .nav-cta .rz-btn.outline:hover{ background: #0f1226; color: #fff; }
.navbar .nav-cta .rz-btn:not(.outline){ box-shadow: 0 10px 24px rgba(225, 0, 0, 0.3); }
.navbar .nav-cta .rz-btn svg{ width: 20px; height: 20px; }
/* dropdown panels */
.navbar .navbar-nav .dropdown{ position: relative; }
.navbar .dropdown-menu{
        top: 100%;
        left: 0;
        margin: 6px 0 0;
        padding: 10px;
        min-width: 240px;
        color: #0f1226;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
    }
.navbar .dropdown-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.navbar .dropdown-menu .dropdown-item{
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 14.5px;
        font-weight: 500;
        color: #0f1226;
    }
.navbar .dropdown-menu .dropdown-item::after{ display: none; }
.navbar .dropdown-menu .dropdown-item:hover{ padding-left: 14px; background: var(--rz-blush); color: var(--rz-red); }
}
/* Tighter fit on smaller laptops: hide Join button until there is room */
@media (min-width: 992px) and (max-width: 1399px){.navbar .container{ padding: 10px 14px !important; }
.navbar .navbar-collapse{ margin: 0 12px 0 16px; padding-left: 16px; }
.navbar .navbar-nav .nav-link{ font-size: 13.5px; padding: 10px 4px; }
.navbar .nav-cta{ padding-left: 14px; gap: 10px; }
.navbar .nav-cta .rz-btn{ height: 48px; padding: 0 18px; font-size: 13.5px; }
}
/* Mobile: keep brand compact inside the mobile bar */
@media (max-width: 991px){.navbar .dropdown-toggle::after{ margin-left: auto; }
.navbar .navbar-nav .dropdown-toggle{ justify-content: space-between; }
.navbar .dropdown-toggle[aria-expanded="true"]::after{ transform: rotate(225deg); }
}
/* =====================================================================
   v4 — Hero redesign (split layout, floating cards, path cards)
   ===================================================================== */
body.light .hero-style3{
    padding: 150px 0 80px;
    text-align: left;
    overflow: hidden;
    background:
        radial-gradient(900px 560px at 92% 4%, rgba(225, 0, 0, 0.11), transparent 62%),
        radial-gradient(700px 420px at -5% 40%, rgba(225, 0, 0, 0.06), transparent 62%),
        #fff;
}
.rz-btn.lg{ height: 60px; padding: 0 32px; border-radius: 999px; font-size: 15px; text-transform: none; letter-spacing: 0; box-shadow: 0 12px 28px rgba(225, 0, 0, 0.28); }
.rz-btn.outline.lg{ box-shadow: none; border-color: var(--rz-ink); color: var(--rz-ink); background: #fff; }
.rz-btn.outline.lg:hover{ background: var(--rz-ink); color: #fff; }
/* Visual */
/* Rotating badge */
/* Path cards */
/* ---------- v5 motion layer ---------- */
.rz-line{ display: block; overflow: hidden; padding: 0.04em 0 0.16em; margin-bottom: -0.16em; }
.rz-w{ display: inline-block; will-change: transform; }
.hero-style3 > .container{ position: relative; z-index: 1; }
/* GSAP drives the floating cards when JS is on */
.rz-progress{ position: fixed; left: 0; top: 0; z-index: 100001; width: 100%; height: 3px; background: var(--rz-red); transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* Buttons: soft sheen sweep on hover */
.rz-btn.lg{ position: relative; overflow: hidden; }
.rz-btn.lg::before{ content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 0.7s; }
.rz-btn.lg:hover::before{ left: 130%; }
/* Tablet */
@media (max-width: 991px){body.light .hero-style3{ padding: 104px 0 56px; text-align: left; }
}
/* Phones */
@media (max-width: 575px){body.light .hero-style3{ padding: 92px 0 44px; }
}
/* =====================================================================
   v6 — Hero: centred statement + "talent corridor" stage
   ===================================================================== */
body.light .hero-style3{ padding: 150px 0 70px; text-align: center; }
.rz-line{ text-align: center; }
/* nodes: zero-size anchors placed on the map */
/* glass cards */
/* floating role chips */
/* scroll cue */
.rz-scroll{ position: absolute; z-index: 5; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.rz-scroll:hover{ color: #fff; }
.rz-scroll i{ display: block; width: 18px; height: 18px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
/* path cards sit just under the stage */
/* ---- responsive ---- */
@media (max-width: 991px){body.light .hero-style3{ padding: 104px 0 50px; text-align: center; }
}
@media (max-width: 575px){body.light .hero-style3{ padding: 92px 0 40px; }
}
/* ---------- Choose your path: intent router (rz-rt-*) ---------- */
/* step bar + sliding-pill switch */
/* bento grid */
/* journey band */
/* text swap transition when the intent changes */
/* scroll reveal (only armed once JS runs, so content is visible without it) */
/* =====================================================================
   v8 — Commitments: simple "staircase" of four pillars
   ===================================================================== */
/* staircase: each pillar sits lower than the last */
/* red fill wipes up on hover */
/* bottom CTA row */
/* scroll reveal (class added by JS only when motion is allowed) */
/* responsive */
/* =====================================================================
   v9 — Page restructure (BRD s8.1 order) + consent banner
   ===================================================================== */
/* Hero is now: copy -> stage -> intent router. Tighten the join between them */
.hero-style3{ padding-bottom: clamp(56px, 7vw, 100px); }
/* Consent banner */
.rz-consent{
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 100002;
    width: min(760px, calc(100% - 32px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    padding: 18px 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 140%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
}
.rz-consent[hidden]{ display: none; }
.rz-consent.is-in{ transform: translate(-50%, 0); opacity: 1; }
.rz-consent-text strong{ display: block; font-size: 15px; color: var(--rz-ink); }
.rz-consent-text p{ margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--rz-muted); }
.rz-consent-text a{ color: var(--rz-red); text-decoration: underline; text-underline-offset: 2px; }
.rz-consent-actions{ display: flex; gap: 10px; flex: 0 0 auto; }
.rz-consent .rz-btn{ height: 44px; padding: 0 22px; border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 14px; }
@media (max-width: 575px){.rz-consent{ flex-direction: column; align-items: stretch; bottom: 12px; padding: 16px; border-radius: 18px; }
.rz-consent-actions .rz-btn{ flex: 1; justify-content: center; }
}
/* =====================================================================
   v10 — How it works: pinned stacking cards with illustrative mock-ups
   ===================================================================== */
/* toggle */
/* stack */
/* art panel */
/* mock 1: brief */
/* mock 2: map */
/* mock 3: match */
/* mock 4: chat */
.cb{ max-width: 82%; margin: 0 0 10px; padding: 11px 15px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
/* mock 5: done */
/* live animations (class set by script when a card is on screen) */
.cb:nth-of-type(1){ --d: 1; }
.cb:nth-of-type(2){ --d: 2; }
.cb:nth-of-type(3){ --d: 3; }
/* end CTA */
/* responsive */
/* =====================================================================
   v11 — Hero (earlier version)
   ===================================================================== */
body.light header.hero-style3{ padding-top: 0 !important; padding-bottom: clamp(56px, 7vw, 100px); text-align: left; background: #fff; }
.rz-btn.sq{ height: 58px; padding: 0 30px; border-radius: 3px; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
/* tablet */
/* phone */
/* =====================================================================
   v12 — Choose your path: the original accordion cards, enhanced
   ===================================================================== */
.portfolio-elegant.rz-orig{ padding: clamp(56px, 7vw, 110px) 0 0; background: #fff; text-align: left; }
.rz-orig .rz-choose{ align-items: flex-end; }
/* desktop: hover accordion (original behaviour), first card open by default */
@media (min-width: 992px){.rz-orig .work-boxs{ display: flex; gap: 14px; margin: 0; }
.rz-orig .item{ flex: 1 1 0; width: auto; margin: 0; min-width: 0; transition: flex-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rz-orig .item.active{ flex-grow: 4.4; width: auto; }
.rz-orig .item .bg-img{ height: clamp(460px, 58vh, 620px); }
}
/* image: slow zoom, readable overlay */
.rz-orig .item .bg-img{ position: relative; isolation: isolate; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rz-orig .item .bg-img::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: inherit; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rz-orig .item.active .bg-img::before,.rz-orig .item:hover .bg-img::before{ transform: scale(1.12); }
.rz-orig .item .bg-img::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 14, 0.25) 0%, rgba(8, 10, 14, 0.05) 40%, rgba(8, 10, 14, 0.82) 100%); transition: opacity 0.5s; }
.rz-orig .item:not(.active) .bg-img::after{ background: linear-gradient(180deg, rgba(8, 10, 14, 0.2), rgba(8, 10, 14, 0.5)); }
.rz-orig .rz-card-tag{ z-index: 3; }
/* collapsed label (vertical) */
.rz-oc-v{ position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); writing-mode: vertical-rl; transform-origin: center; rotate: 180deg; white-space: nowrap; font: 600 clamp(20px, 1.9vw, 28px)/1 var(--rz-font); letter-spacing: 0.02em; color: #fff; transition: opacity 0.4s; }
.rz-orig .item.active .rz-oc-v{ opacity: 0; pointer-events: none; }
/* expanded content */
.rz-oc-body{ position: absolute; z-index: 3; left: clamp(22px, 2.6vw, 40px); right: clamp(22px, 2.6vw, 40px); bottom: clamp(22px, 2.6vw, 40px); max-width: 620px; color: #fff; opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rz-orig .item.active .rz-oc-body{ opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.25s; }
.rz-oc-body h3{ margin: 0 0 12px; font-size: clamp(30px, 3.6vw, 58px); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.rz-oc-stretch{ color: inherit; }
.rz-oc-stretch::after{ content: ""; position: absolute; inset: 0; z-index: 1; }
.rz-oc-body p{ margin: 0; max-width: 520px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.rz-oc-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.rz-oc-chips li{ padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 600; color: #fff; }
.rz-oc-cta{ display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 13px 24px; border-radius: 999px; background: var(--rz-red); font-size: 14.5px; font-weight: 600; color: #fff; transition: background 0.3s, color 0.3s, transform 0.3s; }
.rz-oc-cta svg{ width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 0.3s; }
.rz-orig .item:hover .rz-oc-cta{ background: #fff; color: var(--rz-ink); }
.rz-orig .item:hover .rz-oc-cta svg{ transform: translateX(4px); }
/* caption under image (original) */
.rz-orig .item .cont h6{ font-size: clamp(14px, 1.2vw, 17px); letter-spacing: 1px; color: var(--rz-ink); }
.rz-orig .item .cont span{ color: var(--rz-muted); }
/* scroll-in */
.rz-orig.rz-oc-anim .item{ opacity: 0; translate: 0 46px; }
.rz-orig.rz-oc-anim.is-in .item{ opacity: 1; translate: 0 0; transition: opacity 0.8s, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), flex-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rz-orig.rz-oc-anim.is-in .item:nth-child(2){ transition-delay: 0.1s, 0.1s, 0s; }
.rz-orig.rz-oc-anim.is-in .item:nth-child(3){ transition-delay: 0.2s, 0.2s, 0s; }
.rz-orig.rz-oc-anim.is-in .item:nth-child(4){ transition-delay: 0.3s, 0.3s, 0s; }
/* tablet / phone: stacked cards, content always visible */
@media (max-width: 991px){.rz-orig .item .bg-img{ height: 420px; }
.rz-oc-v{ display: none; }
.rz-oc-body{ opacity: 1; transform: none; pointer-events: auto; max-width: none; }
.rz-oc-body p{ font-size: 15px; }
.rz-oc-chips{ display: none; }
.rz-orig .item .cont span{ opacity: 1; }
}
@media (max-width: 575px){.rz-orig .item .bg-img{ height: 380px; }
}
@media (prefers-reduced-motion: reduce){.rz-orig .item,.rz-oc-body,.rz-orig .item .bg-img::before{ transition-duration: 0.01ms !important; }
}
/* v12.1 — readable text on the open card (beats the old `body.light .hero-style3 p` grey) */
body.light .rz-orig .rz-oc-body p{
    color: #fff;
    max-width: 500px;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 400;
    line-height: 1.65;
    white-space: normal;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
body.light .rz-orig .rz-oc-body h3,body.light .rz-orig .rz-oc-body h3 a{ color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5); }
.rz-orig .item .bg-img::after{
    background: linear-gradient(180deg, rgba(8, 10, 14, 0.28) 0%, rgba(8, 10, 14, 0.12) 28%, rgba(8, 10, 14, 0.78) 62%, rgba(8, 10, 14, 0.94) 100%);
}
.rz-orig .item:not(.active) .bg-img::after{ background: linear-gradient(180deg, rgba(8, 10, 14, 0.25), rgba(8, 10, 14, 0.6)); }
.rz-oc-body h3{ margin-bottom: 14px; }
.rz-oc-body h3::after{ content: ""; display: block; width: 56px; height: 3px; margin-top: 16px; border-radius: 3px; background: var(--rz-red); }
.rz-oc-chips li{ background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
/* =====================================================================
   v13 — Header past the hero: solid frosted bar (fixes menu text over page content)
   Transparent + white text stays over the hero photo (.rz-past is toggled by rootz-navtone.js)
   ===================================================================== */
.navbar .container{ transition: background 0.35s, box-shadow 0.35s, padding 0.35s, border-radius 0.35s; }
@media (min-width: 992px){html body .navbar.rz-past .container{
        background: rgba(255, 255, 255, 0.94) !important;
        -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
        backdrop-filter: saturate(180%) blur(16px) !important;
        border-radius: 20px;
        min-height: 72px;
        padding: 10px 22px !important;
        box-shadow: 0 14px 44px rgba(10, 18, 34, 0.14), 0 1px 0 rgba(10, 18, 34, 0.05) !important;
    }
html body .navbar.rz-past .navbar-collapse{ border-left: 1px solid rgba(10, 18, 34, 0.1); margin: 0 24px 0 28px; padding: 0 8px 0 28px; }
html body .navbar.rz-past .nav-cta{ border-left: 1px solid rgba(10, 18, 34, 0.1); padding-left: 24px; }
html body .navbar.rz-past .navbar-nav .nav-link{ color: #0f1226 !important; text-shadow: none; }
}
@media (max-width: 991px){html body .navbar.rz-past{
        background: rgba(255, 255, 255, 0.96) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        backdrop-filter: blur(14px) !important;
        box-shadow: 0 1px 0 rgba(10, 18, 34, 0.08), 0 10px 30px rgba(10, 18, 34, 0.08) !important;
    }
html body .navbar.rz-past .navbar-toggler{ color: #0f1226; }
}
/* v12.2 — caption under each path card: only shown on the open card (closed cards are too narrow) */
@media (min-width: 992px){.rz-orig .item .cont{ opacity: 0; visibility: hidden; transition: opacity 0.4s 0.15s, visibility 0s 0.55s; }
.rz-orig .item.active .cont{ opacity: 1 !important; visibility: visible; transition: opacity 0.5s 0.35s, visibility 0s 0s; }
.rz-orig .item .cont h6,.rz-orig .item .cont span{ white-space: nowrap; word-break: normal; }
}
/* v14 — How it works (process): back to the original template layout.
   The page-wide full-width + mobile spacing rules are undone for this section only. */
/* =====================================================================
   v15 — How it works: the winding route (dot travels the line as you scroll)
   ===================================================================== */
.rz-rt2{
    position: relative;
    padding: clamp(70px, 8vw, 130px) 0;
    overflow: clip;
    background:
        radial-gradient(800px 420px at 100% 0%, rgba(225, 0, 0, 0.06), transparent 60%),
        #fff;
}
.rz-rt2 .container{ max-width: none !important; padding-left: var(--rz-gutter) !important; padding-right: var(--rz-gutter) !important; }
.rt2-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 64px; margin-bottom: clamp(36px, 5vw, 72px); }
.rt2-title{ margin: 0; font-size: clamp(34px, 5vw, 80px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; color: var(--rz-ink); }
.rt2-title span{ color: var(--rz-red); }
.rt2-lead{ max-width: 400px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--rz-muted); }
/* route (desktop) */
.rt2-route{ position: relative; }
.rt2-svg{ display: block; width: 100%; height: auto; overflow: visible; }
.rt2-base{ fill: none; stroke: rgba(22, 22, 22, 0.16); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.rt2-fill{ fill: none; stroke: var(--rz-red); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(225, 0, 0, 0.45)); }
.rt2-stop line{ stroke: rgba(22, 22, 22, 0.16); stroke-width: 1.5; stroke-dasharray: 4 6; transition: stroke 0.5s; }
.rt2-stop circle{ fill: #fff; stroke: rgba(22, 22, 22, 0.2); stroke-width: 2; transition: fill 0.5s, stroke 0.5s; }
.rt2-stop text{ font: 700 13px var(--rz-font); fill: var(--rz-muted); transition: fill 0.5s; }
.rt2-stop.is-reached line{ stroke: var(--rz-red); }
.rt2-stop.is-reached circle{ fill: var(--rz-red); stroke: var(--rz-red); }
.rt2-stop.is-reached text{ fill: #fff; }
.rt2-dot{ fill: #fff; stroke: var(--rz-red); stroke-width: 4; filter: drop-shadow(0 0 10px rgba(225, 0, 0, 0.7)); }
.rt2-ring{ fill: rgba(225, 0, 0, 0.18); animation: rt2Pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rt2Pulse{ 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
/* cards */
.rt2-cards{ display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.rt2-card{ position: relative; }
.rt2-in{
    position: relative;
    height: 100%;
    margin: 0 9px;
    padding: 26px 22px 28px;
    border-radius: 24px;
    background: var(--rz-soft);
    border-top: 3px solid transparent;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.5s, box-shadow 0.5s, border-color 0.5s;
}
.rt2-ico{ display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 28px; border-radius: 16px; background: #fff; border: 1px solid rgba(22, 22, 22, 0.1); transition: background 0.5s, border-color 0.5s; }
.rt2-ico svg{ width: 24px; height: 24px; stroke: var(--rz-red); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s; }
.rt2-in h3{ margin: 0 0 10px; font-size: clamp(18px, 1.5vw, 23px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--rz-ink); }
.rt2-in p{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--rz-muted); }
.rt2-card.is-reached .rt2-in{ background: #fff; border-top-color: var(--rz-red); transform: translateY(-8px); box-shadow: 0 24px 50px rgba(22, 22, 22, 0.12); }
.rt2-card.is-reached .rt2-ico{ background: var(--rz-red); border-color: var(--rz-red); }
.rt2-card.is-reached .rt2-ico svg{ stroke: #fff; }
/* closing row */
.rt2-end{ display: flex; align-items: center; justify-content: center; gap: 18px 32px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 72px); }
.rt2-end p{ margin: 0; font-size: clamp(20px, 2vw, 30px); font-weight: 500; color: var(--rz-ink); }
.rt2-end > div{ display: flex; flex-wrap: wrap; gap: 12px; }
.rt2-end .rz-btn{ height: 54px; padding: 0 28px; border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 15px; }
/* tablet: two columns, no wave */
@media (max-width: 1199px){.rt2-svg{ display: none; }
.rt2-cards{ grid-template-columns: repeat(2, 1fr); gap: 18px 0; position: relative; }
.rt2-in{ margin: 0 9px; }
}
/* phone: single column with a progress rail */
@media (max-width: 767px){.rt2-head{ flex-direction: column; align-items: flex-start; }
.rt2-cards{ grid-template-columns: 1fr; gap: 14px; padding-left: 26px; }
.rt2-cards::before{ content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: rgba(22, 22, 22, 0.14); border-radius: 2px; }
.rt2-card::before{ content: ""; position: absolute; left: -26px; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(22, 22, 22, 0.25); z-index: 1; transition: background 0.4s, border-color 0.4s; }
.rt2-card.is-reached::before{ background: var(--rz-red); border-color: var(--rz-red); }
.rt2-in{ margin: 0; }
.rt2-end > div,.rt2-end .rz-btn{ width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){.rt2-ring{ animation: none; }
.rt2-in,.rt2-stop line,.rt2-stop circle{ transition: none; }
}
/* =====================================================================
   v22 — Why Rootz: drag-to-compare "both sides of the hire"
   ===================================================================== */
section.rz-wd{ padding-top: clamp(70px, 8vw, 130px) !important; padding-bottom: clamp(70px, 8vw, 130px) !important; background: #fff; }
.rz-wd .container{ max-width: none !important; padding-left: var(--rz-gutter) !important; padding-right: var(--rz-gutter) !important; }
.wd-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 64px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 52px); }
.wd-eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 99px; border: 1px solid rgba(22, 22, 22, 0.15); font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rz-ink); }
.wd-eyebrow i{ width: 8px; height: 8px; border-radius: 50%; background: var(--rz-red); }
.wd-title{ margin: 22px 0 0; font-size: clamp(34px, 5vw, 80px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; color: var(--rz-ink); }
.wd-title span{ color: var(--rz-red); }
.wd-lead{ max-width: 400px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--rz-muted); }
/* stage */
.wd-stage{ --p: 50%; position: relative; height: clamp(520px, 58vh, 660px); overflow: hidden; border-radius: clamp(24px, 3vw, 44px); background: #14161c; isolation: isolate; touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: 0 40px 90px rgba(14, 15, 20, 0.2); }
.wd-pane{ position: absolute; inset: 0; color: #fff; }
.wd-pane > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.wd-pane::before{ content: ""; position: absolute; inset: 0; }
.wd-emp::before{ background: linear-gradient(90deg, rgba(10, 14, 24, 0.92) 0%, rgba(10, 14, 24, 0.72) 55%, rgba(10, 14, 24, 0.45) 100%); }
.wd-cand::before{ background: linear-gradient(270deg, rgba(196, 0, 0, 0.94) 0%, rgba(210, 10, 10, 0.78) 55%, rgba(225, 0, 0, 0.5) 100%); }
.wd-emp{ clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.wd-copy{ position: absolute; top: 0; bottom: 0; width: min(46%, 520px); display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4vw, 56px); }
.wd-emp .wd-copy{ left: 0; }
.wd-cand .wd-copy{ right: 0; }
.wd-tag{ align-self: flex-start; margin-bottom: 16px; padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.wd-copy h3{ margin: 0 0 18px; font-size: clamp(28px, 3.2vw, 52px); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.wd-copy ul{ margin: 0; padding: 0; list-style: none; }
.wd-copy li{ position: relative; padding: 0 0 12px 22px; font-size: clamp(14px, 1.1vw, 16.5px); line-height: 1.55; color: rgba(255, 255, 255, 0.95); }
.wd-copy li::before{ content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.wd-emp .wd-copy li::before{ background: var(--rz-red); }
body.light .rz-wd .wd-copy li,body.light .rz-wd .wd-copy h3{ color: #fff !important; }
.wd-cta{ align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 24px; border-radius: 999px; background: #fff; color: var(--rz-ink); font-size: 14.5px; font-weight: 600; transition: background 0.3s, color 0.3s; }
.wd-cta:hover{ background: var(--rz-ink); color: #fff; }
.wd-emp .wd-cta{ background: var(--rz-red); color: #fff; }
.wd-emp .wd-cta:hover{ background: #fff; color: var(--rz-red); }
.wd-cta svg{ width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; }
/* handle */
.wd-handle{ position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--p); width: 44px; margin-left: -22px; cursor: ew-resize; outline: none; }
.wd-handle::before{ content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }
.wd-knob{ position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4); transition: transform 0.3s; }
.wd-knob svg{ width: 26px; height: 26px; stroke: var(--rz-red); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wd-handle:hover .wd-knob,.wd-stage.is-drag .wd-knob{ transform: scale(1.1); }
.wd-handle:focus-visible .wd-knob{ outline: 3px solid var(--rz-red); outline-offset: 3px; }
.wd-stage.is-drag{ cursor: ew-resize; }
.wd-stage.is-ease .wd-emp{ transition: clip-path 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wd-stage.is-ease .wd-handle{ transition: left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* stats */
/* phone / small tablet: two stacked cards, no slider */
@media (max-width: 767px){.wd-stage{ height: auto; display: flex; flex-direction: column; gap: 12px; background: none; box-shadow: none; overflow: visible; border-radius: 0; touch-action: auto; }
.wd-pane{ position: relative; inset: auto; clip-path: none !important; min-height: 440px; border-radius: 26px; overflow: hidden; }
.wd-copy{ position: relative; width: auto; padding: 28px 22px; min-height: 440px; }
.wd-handle{ display: none; }
}
@media (prefers-reduced-motion: reduce){.wd-stage.is-ease .wd-emp,.wd-stage.is-ease .wd-handle,.wd-knob{ transition: none; }
}
/* v22.1 — layer order (photo < tint < copy) and a tighter header */
.wd-pane > img{ z-index: 0; }
.wd-pane::before{ z-index: 1; }
.wd-copy{ z-index: 2; }
@media (min-width: 992px){.wd-head{ flex-wrap: nowrap; gap: 40px; }
.wd-title{ font-size: clamp(34px, 4.2vw, 68px); white-space: nowrap; }
.wd-lead{ flex: 0 0 clamp(300px, 26vw, 380px); }
}
/* v22.2 — each pane is its own stacking context (employers above candidates); employers first on phones */
.wd-cand{ z-index: 1; }
.wd-emp{ z-index: 2; }
@media (max-width: 767px){.wd-emp{ order: -1; z-index: auto; }
.wd-cand{ z-index: auto; }
}
/* v22.3 — let the photos show: tint only where the text sits, fading out toward the handle */
.wd-emp::before{
    background:
        linear-gradient(90deg, rgba(10, 14, 24, 0.8) 0%, rgba(10, 14, 24, 0.58) 30%, rgba(10, 14, 24, 0.14) 62%, rgba(10, 14, 24, 0) 100%),
        linear-gradient(0deg, rgba(10, 14, 24, 0.35) 0%, rgba(10, 14, 24, 0) 40%);
}
.wd-cand::before{
    background:
        linear-gradient(270deg, rgba(190, 0, 0, 0.82) 0%, rgba(205, 0, 0, 0.6) 30%, rgba(225, 0, 0, 0.14) 62%, rgba(225, 0, 0, 0) 100%),
        linear-gradient(0deg, rgba(120, 0, 0, 0.3) 0%, rgba(120, 0, 0, 0) 40%);
}
.wd-pane > img{ filter: saturate(1.08) contrast(1.03); }
/* keep the copy legible on the lighter tint */
.wd-copy h3,.wd-copy li,.wd-tag{ text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55); }
.wd-tag{ background: rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* v22.4 — enhancements: jump control, journey chips, ghost words, SG-VN bridge, depth parallax, following knob */
/* jump control */
.wd-jump{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 14px; }
.wd-jump button{ height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(22, 22, 22, 0.2); background: #fff; font: 600 13.5px/1 var(--rz-font); color: var(--rz-ink); cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.wd-jump button:hover{ border-color: var(--rz-ink); }
.wd-jump button.is-on{ background: var(--rz-ink); border-color: var(--rz-ink); color: #fff; }
.wd-jump button:focus-visible{ outline: 2px solid var(--rz-red); outline-offset: 3px; }
/* a little taller so the photos breathe */
.wd-stage{ height: clamp(560px, 64vh, 720px); }
/* giant ghost words, clipped with their pane */
.wd-ghost{ position: absolute; z-index: 1; bottom: -0.16em; font: 700 clamp(90px, 13vw, 210px)/1 var(--rz-font); letter-spacing: -0.05em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.34); pointer-events: none; user-select: none; }
.wd-emp .wd-ghost{ left: 2%; }
.wd-cand .wd-ghost{ right: 2%; }
/* chips from the BRD journey wording */
.wd-chips{ display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 4px; }
.wd-chips span{ padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600; color: #fff; text-shadow: none; }
/* depth: photos drift against the divider */
.wd-pane > img{ width: 108%; left: -4%; transform: translateX(calc((var(--pn, 50) - 50) * -0.12%)) scale(1.02); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wd-stage.is-drag .wd-pane > img{ transition: none; }
.wd-emp > img{ transform: translateX(calc((var(--pn, 50) - 50) * 0.12%)) scale(1.02); }
/* the knob follows the cursor along the line */
.wd-knob{ top: var(--ky, 50%); transition: top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s; }
/* SG to VN badge on the divider */
.wd-bridge{ position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: #fff; color: var(--rz-ink); font: 700 12.5px/1 var(--rz-font); letter-spacing: 0.6px; white-space: nowrap; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
.wd-bridge svg{ width: 15px; height: 15px; stroke: var(--rz-red); stroke-width: 2.2; fill: none; }
/* knob pulse hint on the very first view */
@keyframes wdPulse{ 0% { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.7); } 100% { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4), 0 0 0 22px rgba(255, 255, 255, 0); } }
.wd-stage:not(.is-drag) .wd-knob{ animation: wdPulse 2.2s ease-out infinite; }
.wd-stage.is-drag .wd-knob{ animation: none; }
@media (max-width: 991px){.wd-ghost{ font-size: clamp(70px, 14vw, 140px); }
}
@media (max-width: 767px){.wd-jump,.wd-bridge{ display: none; }
.wd-stage{ height: auto; }
.wd-pane > img,.wd-emp > img{ width: 100%; left: 0; transform: none; }
.wd-ghost{ font-size: 86px; bottom: -0.12em; opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce){.wd-stage:not(.is-drag) .wd-knob{ animation: none; }
.wd-pane > img,.wd-knob{ transition: none; }
}
/* v22.5 — bridge arrow (svg max-width:100% collapsed it) and calmer ghost words */
.wd-bridge svg{ flex: 0 0 15px; width: 15px; max-width: none; }
.wd-ghost{ font-size: clamp(70px, 9.5vw, 150px); bottom: -0.2em; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.2); }
.wd-chips span{ font-size: 11.5px; padding: 5px 11px; }
@media (max-width: 767px){.wd-ghost{ font-size: 70px; }
}
/* v22.6 — smaller ghost words (Employers / Candidates) */
.wd-ghost{ font-size: clamp(44px, 5.4vw, 88px); bottom: -0.14em; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.24); }
.wd-emp .wd-ghost{ left: 3%; }
.wd-cand .wd-ghost{ right: 3%; }
@media (max-width: 767px){.wd-ghost{ font-size: 48px; }
}
/* v22.7 — a closed side folds into a slim strip with a horizontal label */
.wd-fold{ position: absolute; z-index: 3; top: 0; bottom: 0; width: 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 8px; border: 0; background: transparent; color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.4s 0.25s; }
.wd-emp .wd-fold{ left: 0; }
.wd-cand .wd-fold{ right: 0; }
.wd-fold-ic{ display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); transition: transform 0.3s; }
.wd-fold-ic svg{ width: 20px; height: 20px; stroke: var(--rz-red); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.wd-fold-t{ font: 700 clamp(14px, 1.3vw, 18px)/1.1 var(--rz-font); letter-spacing: -0.01em; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.wd-fold:hover .wd-fold-ic{ transform: scale(1.12) rotate(90deg); }
.wd-fold:focus-visible{ outline: 2px solid #fff; outline-offset: -6px; border-radius: 14px; }
.wd-stage.fold-cand .wd-cand .wd-fold,.wd-stage.fold-emp .wd-emp .wd-fold{ opacity: 1; pointer-events: auto; }
/* hide the cut-off copy + ghost word of the folded side */
.wd-stage.fold-cand .wd-cand .wd-copy,.wd-stage.fold-cand .wd-cand .wd-ghost,.wd-stage.fold-emp .wd-emp .wd-copy,.wd-stage.fold-emp .wd-emp .wd-ghost{ opacity: 0; pointer-events: none; }
.wd-copy,.wd-ghost{ transition: opacity 0.35s; }
@media (max-width: 767px){.wd-fold{ display: none; }
}
/* =====================================================================
   v26 — Trust & transparency: field inventory (what we ask / never ask)
   ===================================================================== */
/* the fields */
/* what we never ask */
/* =====================================================================
   v27 — tighter, consistent spacing between sections
   (was 100-140px of padding per side; now one shared value)
   ===================================================================== */
:root{ --rz-sec: clamp(36px, 4vw, 64px); }
main section#about,main section.serv-style2,main section#process,main section#why-rootz,main section#rzGl,main section#commitments,main section#insights{
    padding-top: var(--rz-sec) !important;
    padding-bottom: var(--rz-sec) !important;
}
/* hero -> first content, and the little marquee band between sections */
body.light header.hero-style3{ padding-bottom: var(--rz-sec) !important; }
.portfolio-elegant.rz-orig{ padding-top: clamp(32px, 4vw, 56px); }
main .main-marq.xlrg.with-shad{ margin-top: 0; margin-bottom: 0; }
/* =====================================================================
   v28 — tighter gap between each section heading and its content
   ===================================================================== */
:root{ --rz-head: clamp(18px, 2.2vw, 30px); }
main .rt2-head,main .wd-head,main .rz-dd-head,main .ins-head,main .rz-gl-head,main .rz-choose{ margin-bottom: var(--rz-head) !important; }
/* About: the rule under the eyebrow and the big statement */
main .ab-eyebrow-row{ margin-bottom: clamp(20px, 2.6vw, 36px) !important; }
main .ab-statement{ margin-bottom: clamp(26px, 3.4vw, 48px) !important; }
/* the Employers / Both / Candidates control sits closer to the slider */
main .wd-jump{ margin-bottom: 10px; }
/* v28.1 — the route drawing has empty space above its highest stop; pull it up under the heading */
@media (min-width: 1200px){main .rt2-route .rt2-svg{ margin-top: calc(-3.2vw); }
}
/* v22.8 — candidates side: more transparent red tint so the photo shows through */
.wd-cand::before{
    background:
        linear-gradient(270deg, rgba(190, 0, 0, 0.52) 0%, rgba(205, 0, 0, 0.34) 30%, rgba(225, 0, 0, 0.06) 62%, rgba(225, 0, 0, 0) 100%),
        linear-gradient(0deg, rgba(110, 0, 0, 0.22) 0%, rgba(110, 0, 0, 0) 40%);
}
/* keep the white copy readable on the lighter tint */
.wd-cand .wd-copy h3,.wd-cand .wd-copy li,.wd-cand .wd-tag{ text-shadow: 0 2px 22px rgba(70, 0, 0, 0.85), 0 1px 3px rgba(70, 0, 0, 0.5); }
.wd-cand .wd-chips span{ background: rgba(70, 0, 0, 0.28); }
/* v22.9 — photos overscan the frame so the depth shift can never expose a dark edge */
@media (min-width: 768px){.wd-pane > img{ width: 116%; left: -8%; transform: translateX(calc((var(--pn, 50) - 50) * -0.08%)) scale(1.02); }
.wd-emp > img{ transform: translateX(calc((var(--pn, 50) - 50) * 0.08%)) scale(1.02); }
}
/* v22.10 — the global `img { max-width: 100% }` was capping the overscan; lift it for the slider photos */
.wd-pane > img{ max-width: none; }
@media (max-width: 767px){.wd-pane > img,.wd-emp > img{ width: 100%; left: 0; transform: none; }
}
/* v29 — commitments: desk sized to the cards, less space above and below them */
@media (min-width: 768px){main .rz-dd-desk{ height: clamp(440px, 34vw, 480px); }
}
main .rz-dd-cta{ margin-top: clamp(6px, 1vw, 14px); }
main .rz-dd-head{ margin-bottom: clamp(6px, 1vw, 14px) !important; }
/* v29.1 — phone: give the buttons breathing room below the stacked cards, and a little under the heading */
@media (max-width: 767px){main .rz-dd-cta{ margin-top: 28px; }
main .rz-dd-head{ margin-bottom: 20px !important; }
}
/* scroll reveals (rootz-motion.js adds/removes .rv; nothing is hidden without the script) */
.rv.rv{ opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s cubic-bezier(.2, .8, .2, 1) var(--rv-d, 0s), transform .9s cubic-bezier(.2, .8, .2, 1) var(--rv-d, 0s); will-change: opacity, transform; }
.rv[data-rv="l"]{ transform: translate3d(-40px, 0, 0); }
.rv[data-rv="r"]{ transform: translate3d(40px, 0, 0); }
.rv[data-rv="zoom"]{ transform: scale(.95); }
.rv[data-rv="pop"]{ transform: scale(.8); }
.rv[data-rv="fade"]{ transform: none; }
.rv.rv.in{ opacity: 1; transform: none; }
/* =====================================================================
   v30 — Hero: light split layout (copy + photo + role ticker)
   ===================================================================== */
body.light header.hero-style3{ padding-top: 0 !important; background: #fff; }
.rz-h3{ position: relative; overflow: hidden; background: #fff; text-align: left; }
.rz-h3-blob{ position: absolute; right: -12%; top: -14%; width: min(62vw, 820px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(225, 0, 0, 0.11), transparent 66%); pointer-events: none; }
.rz-h3-in{ position: relative; padding: clamp(112px, 12vw, 150px) var(--rz-gutter) clamp(28px, 3vw, 44px); }
.rz-h3-grid{ display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: clamp(32px, 5vw, 96px); min-height: clamp(520px, 62vh, 700px); }
.rz-h3-eyebrow{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(20px, 2.4vw, 30px); padding: 9px 18px; border-radius: 99px; border: 1px solid rgba(22, 22, 22, 0.15); background: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rz-ink); }
.rz-h3-eyebrow i{ width: 8px; height: 8px; border-radius: 50%; background: var(--rz-red); }
.rz-h3-h1{ margin: 0; font-family: var(--rz-font); font-size: clamp(46px, 6.6vw, 108px) !important; font-weight: 650; line-height: 1.0; letter-spacing: -0.035em; color: var(--rz-ink); text-indent: 0; }
.rz-h3 .rz-line{ display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; text-align: left; }
.rz-h3 .rz-w{ display: inline-block; }
.rz-h3-h1 .rz-hi{ color: var(--rz-red); }
.rz-h3-p{ max-width: 520px; margin: clamp(22px, 2.6vw, 32px) 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: var(--rz-muted); }
body.light .rz-h3 .rz-h3-p{ color: var(--rz-muted); }
.rz-h3-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
/* photo composition */
.rz-h3-visual{ position: relative; padding: 0 0 36px 36px; }
.rz-h3-photo{ position: relative; aspect-ratio: 5 / 5.4; width: 100%; overflow: hidden; border-radius: 40px 40px 40px 120px; background: #14161c; box-shadow: 0 34px 80px rgba(22, 22, 22, 0.2); }
.rz-h3-photo img{ position: absolute; inset: -4% 0; width: 100%; height: 108%; max-width: none; object-fit: cover; object-position: center; will-change: transform; }
.rz-h3-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 10, 14, 0.32)); }
.rz-h3-card{ position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 20px 50px rgba(22, 22, 22, 0.2); }
.rz-h3-card-l{ font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rz-muted); }
.rz-h3-card-r{ display: flex; gap: 8px; }
.rz-h3-card-r a{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--rz-soft); font-size: 14px; font-weight: 600; color: var(--rz-ink); transition: background 0.3s, color 0.3s; }
.rz-h3-card-r a i{ width: 8px; height: 8px; border-radius: 50%; background: var(--rz-red); transition: background 0.3s; }
.rz-h3-card-r a:hover{ background: var(--rz-red); color: #fff; }
.rz-h3-card-r a:hover i{ background: #fff; }
.rz-h3-chip{ position: absolute; right: 22px; top: 22px; z-index: 2; padding: 10px 18px; border-radius: 99px; background: var(--rz-red); font-size: 13px; font-weight: 600; letter-spacing: 0.2px; color: #fff; box-shadow: 0 14px 30px rgba(225, 0, 0, 0.35); }
/* role ticker */
.rz-h3-roles{ display: flex; align-items: center; gap: 20px; margin-top: clamp(28px, 3.4vw, 48px); padding-top: 22px; border-top: 1px solid rgba(22, 22, 22, 0.1); }
.rz-h3-roles-l{ flex: 0 0 auto; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rz-muted); }
.rz-h3-roles-v{ flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rz-h3-track{ display: flex; gap: 10px; width: max-content; animation: rzH3Tick 55s linear infinite; }
.rz-h3-roles-v:hover .rz-h3-track{ animation-play-state: paused; }
.rz-h3-track span{ flex: 0 0 auto; padding: 9px 18px; border-radius: 99px; border: 1px solid rgba(22, 22, 22, 0.14); background: #fff; font-size: 14px; font-weight: 500; color: var(--rz-ink); white-space: nowrap; }
@keyframes rzH3Tick{ to { transform: translateX(-50%); } }
@media (max-width: 991px){.rz-h3-in{ padding-top: 104px; }
.rz-h3-grid{ grid-template-columns: 1fr; min-height: 0; gap: 36px; }
.rz-h3-h1{ font-size: clamp(42px, 11vw, 78px) !important; }
.rz-h3-visual{ max-width: 560px; width: 100%; }
.rz-h3-photo{ aspect-ratio: 4 / 3.5; }
}
@media (max-width: 575px){.rz-h3-in{ padding-top: 92px; }
.rz-h3-ctas{ flex-direction: column; }
.rz-h3-ctas .rz-btn{ width: 100%; justify-content: center; }
.rz-h3-visual{ padding: 0 0 30px 0; }
.rz-h3-photo{ border-radius: 28px 28px 28px 72px; }
.rz-h3-card{ left: 12px; right: 12px; padding: 14px; }
.rz-h3-card-r a{ flex: 1; justify-content: center; }
.rz-h3-chip{ right: 14px; top: 14px; font-size: 12px; padding: 8px 14px; }
.rz-h3-roles{ flex-direction: column; align-items: flex-start; gap: 12px; }
.rz-h3-roles-v{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){.rz-h3-track{ animation: none; }
.rz-h3-roles-v{ overflow-x: auto; }
}
/* v30.1 — drop the template's 140px section padding; tighten so the hero fits one screen */
section.rz-h3{ padding-top: 0 !important; padding-bottom: 0 !important; }
.rz-h3-in{ padding-top: clamp(100px, 8.5vw, 120px); padding-bottom: clamp(22px, 2.4vw, 34px); }
.rz-h3-grid{ min-height: clamp(480px, 56vh, 600px); }
.rz-h3-h1{ font-size: clamp(44px, 5.6vw, 90px) !important; }
.rz-h3-photo{ aspect-ratio: 5 / 5; }
.rz-h3-roles{ margin-top: clamp(20px, 2.4vw, 34px); padding-top: 18px; }
@media (max-width: 991px){.rz-h3-in{ padding-top: 96px; }
.rz-h3-h1{ font-size: clamp(42px, 11vw, 78px) !important; }
.rz-h3-photo{ aspect-ratio: 4 / 3.5; }
}

/* About: the India sentence is longer; keep the panel compact */
.ab2-statement { font-size: clamp(26px, 3.7vw, 56px); }
main section#about h2.ab2-statement { font-size: clamp(26px, 3.6vw, 54px) !important; }

/* Header: more breathing room between the logo, the menu and the Hire Talent button */
@media (min-width: 992px) {
    html body .navbar .navbar-collapse,
    html body .navbar.rz-scrolled .navbar-collapse,
    html body .navbar.nav-scroll .navbar-collapse,
    html body .navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-collapse {
        margin: 0 clamp(18px, 3.4vw, 64px) 0 clamp(26px, 4.4vw, 84px) !important;
        padding: 0 4px 0 clamp(22px, 3.2vw, 52px) !important;
    }
    html body .navbar .nav-cta { padding-left: clamp(18px, 2.6vw, 44px) !important; }
}

/* Header spacing, wider again (large screens get the most; tablets-landscape stay compact so nothing wraps) */
@media (min-width: 1200px) {
    html body .navbar .navbar-collapse,
    html body .navbar.rz-scrolled .navbar-collapse,
    html body .navbar.nav-scroll .navbar-collapse,
    html body .navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-collapse {
        margin: 0 clamp(36px, 5vw, 96px) 0 clamp(44px, 6.4vw, 124px) !important;
        padding: 0 4px 0 clamp(32px, 4.6vw, 84px) !important;
    }
    html body .navbar .nav-cta { padding-left: clamp(28px, 3.6vw, 68px) !important; }
}

/* Header: no divider lines, and a little more space again */
@media (min-width: 992px) {
    html body .navbar .navbar-collapse,
    html body .navbar.rz-scrolled .navbar-collapse,
    html body .navbar.nav-scroll .navbar-collapse,
    html body .navbar.rz-past .navbar-collapse,
    html body .navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-collapse,
    html body .navbar .nav-cta,
    html body .navbar.rz-scrolled .nav-cta,
    html body .navbar.nav-scroll .nav-cta,
    html body .navbar.rz-past .nav-cta { border-left: 0 !important; border-right: 0 !important; }
}
@media (min-width: 1200px) {
    html body .navbar .navbar-collapse,
    html body .navbar.rz-scrolled .navbar-collapse,
    html body .navbar.nav-scroll .navbar-collapse,
    html body .navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-collapse {
        margin: 0 clamp(44px, 5.6vw, 108px) 0 clamp(52px, 7.2vw, 140px) !important;
        padding: 0 4px 0 clamp(36px, 5.2vw, 96px) !important;
    }
    html body .navbar .nav-cta { padding-left: clamp(32px, 4vw, 76px) !important; }
}

/* Hero: wider photo (bigger share of the row, wider frame) */
@media (min-width: 992px) {
    .rz-h3-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(24px, 3.4vw, 56px); }
    .rz-h3-visual { padding-left: 20px; }
    .rz-h3-photo { aspect-ratio: 6 / 5.1; }
    .rz-h3-h1 { font-size: clamp(40px, 5.1vw, 80px) !important; }
}

/* Why Rootz: plain white section background (no pink glow) */
main section.wk#why-rootz { background: #fff !important; }

/* Why Rootz: smaller feature icon tiles and icons */
main .wk-ic { width: clamp(38px, 3.2vw, 48px); height: clamp(38px, 3.2vw, 48px); border-radius: 12px; }
main .wk-ic svg { width: 50%; height: 50%; stroke-width: 1.8; }
main .wk-f { column-gap: clamp(10px, 1.1vw, 16px); }

/* Why Rootz: more breathing room above and below the section */
main section.wk#why-rootz { padding-top: clamp(96px, 10vw, 160px) !important; padding-bottom: clamp(96px, 10vw, 160px) !important; }

/* Marquee words (Singapore · Vietnam · IT Recruitment): slightly smaller on desktop */
@media (min-width: 992px) { main .main-marq.xlrg .box .item h4 { font-size: 7.6vw; } }

/* Process route: sharper, bolder step numbers inside the dots */
.rt2-stop text { font: 800 15.5px var(--rz-font); letter-spacing: 0.04em; font-variant-numeric: tabular-nums lining-nums; dominant-baseline: central; paint-order: stroke; transition: fill 0.5s, transform 0.5s; transform-box: fill-box; transform-origin: center; }
.rt2-stop.is-reached text { fill: #fff; stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.4px; }
.rt2-stop:not(.is-reached) text { fill: var(--rz-ink); }