/* ---------- IT Talent Solutions: moving gallery wall (rz-gl-*) ---------- */
.rz-gl{ --ease: cubic-bezier(0.22, 1, 0.36, 1); --cw: clamp(300px, 27vw, 420px); padding: clamp(56px, 7vw, 110px) 0; overflow: hidden; }
.rz-gl-head{ text-align: center; margin-bottom: clamp(30px, 4vw, 56px); }
.rz-gl-title{ margin: 16px auto 0; max-width: 900px; font-size: clamp(38px, 6vw, 92px); font-weight: 400; line-height: 0.98; letter-spacing: -0.035em; }
.rz-gl-title em{ font-style: normal; color: var(--rz-red); }
.rz-gl-rows{ display: grid; gap: 18px; padding: 14px 0 34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rz-gl-row{ display: flex; overflow: visible; }
.rz-gl-track{ display: flex; flex: 0 0 auto; gap: 18px; padding-right: 18px; animation: rzGlRun 75s linear infinite; will-change: transform; }
.rz-gl-rev .rz-gl-track{ animation-direction: reverse; animation-duration: 90s; }
.rz-gl-row:hover .rz-gl-track,.rz-gl-row:focus-within .rz-gl-track{ animation-play-state: paused; }
@keyframes rzGlRun{ to { transform: translateX(-50%); } }
.rz-gl-c{ position: relative; flex: 0 0 var(--cw); aspect-ratio: 2.2 / 1; overflow: hidden; border-radius: 26px; background: #14161c; color: #fff; isolation: isolate; transition: transform 0.6s var(--ease), box-shadow 0.6s, filter 0.5s; }
.rz-gl-c img{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); filter: saturate(0.9) brightness(0.9); transition: transform 1.3s var(--ease), filter 0.7s; }
.rz-gl-c::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.82) 100%); }
.rz-gl-c::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(225, 0, 0, 0.6)); opacity: 0; transition: opacity 0.5s; }
.rz-gl-rows:hover .rz-gl-c:not(:hover){ filter: brightness(0.7) saturate(0.7); }
.rz-gl-c:hover,.rz-gl-c:focus-visible{ transform: translateY(-12px) scale(1.04); box-shadow: 0 34px 60px rgba(0, 0, 0, 0.28); color: #fff; outline: none; z-index: 3; }
.rz-gl-c:focus-visible{ box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rz-red), 0 34px 60px rgba(0, 0, 0, 0.28); }
.rz-gl-c:hover img,.rz-gl-c:focus-visible img{ transform: scale(1.12); filter: saturate(1.1) brightness(1); }
.rz-gl-c:hover::after,.rz-gl-c:focus-visible::after{ opacity: 1; }
.rz-gl-no{ position: absolute; top: 20px; left: 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.rz-gl-go{ position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6) rotate(-45deg); transition: opacity 0.35s, transform 0.5s var(--ease); }
.rz-gl-go svg{ width: 18px; height: 18px; stroke: var(--rz-ink); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rz-gl-c:hover .rz-gl-go,.rz-gl-c:focus-visible .rz-gl-go{ opacity: 1; transform: none; }
.rz-gl-tx{ position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; }
.rz-gl-tx b{ display: block; font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.rz-gl-tx em{ display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.95); transition: max-height 0.5s var(--ease), opacity 0.4s, margin 0.5s var(--ease); }
.rz-gl-c:hover .rz-gl-tx em,.rz-gl-c:focus-visible .rz-gl-tx em{ max-height: 44px; opacity: 1; margin-top: 10px; }
.rz-gl-foot{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 4px; }
.rz-gl-foot p{ margin: 0; font-size: 16px; color: var(--rz-muted); }
.rz-gl-all{ display: inline-flex; align-items: center; gap: 12px; padding: 15px 28px; border-radius: 999px; background: var(--rz-ink); color: #fff; font-size: 15px; font-weight: 600; transition: background 0.35s, transform 0.35s var(--ease); }
.rz-gl-all svg{ width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; transition: transform 0.4s var(--ease); }
.rz-gl-all:hover{ background: var(--rz-red); color: #fff; transform: translateY(-2px); }
.rz-gl-all:hover svg{ transform: translate(4px, -4px) rotate(-45deg); }
/* entrance (armed by JS) */
.rz-gl.gl-armed .rz-gl-head,.rz-gl.gl-armed .rz-gl-rows,.rz-gl.gl-armed .rz-gl-foot{ opacity: 0; transform: translateY(40px); }
.rz-gl.gl-in .rz-gl-head,.rz-gl.gl-in .rz-gl-rows,.rz-gl.gl-in .rz-gl-foot{ opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.rz-gl.gl-in .rz-gl-rows{ transition-delay: 0.15s; }
.rz-gl.gl-in .rz-gl-foot{ transition-delay: 0.3s; }
@media (max-width: 767px){.rz-gl{ --cw: 250px; }
.rz-gl-track{ gap: 12px; padding-right: 12px; }
.rz-gl-rows{ gap: 12px; }
.rz-gl-c{ border-radius: 20px; }
.rz-gl-tx{ padding: 16px; }
.rz-gl-tx em{ display: none; }
}
@media (prefers-reduced-motion: reduce){.rz-gl-track{ animation: none; }
.rz-gl-rows{ -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
.rz-gl-rev{ display: none; }
.rz-gl *,.rz-gl *::before{ transition-duration: 0.01ms !important; transition-delay: 0s !important; }
.rz-gl.gl-armed .rz-gl-head,.rz-gl.gl-armed .rz-gl-rows,.rz-gl.gl-armed .rz-gl-foot{ opacity: 1; transform: none; }
}
/* ---------- Header: periodic table of IT talent (rz-hs-*) ---------- */
/* discipline colours */
/* the table */
/* reveal: tiles pop in with a diagonal stagger */
/* ---------- Header + hero: transparent nav over the office photo ---------- */
/* hero image treatment: navy tint on the left for headline legibility */
@media (min-width: 992px){/* at the top of the page: no bar, white text straight on the photo */
.navbar:not(.rz-scrolled):not(.nav-scroll) .container{
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        min-height: 84px;
        padding: 12px 0 !important;
    }
.navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-collapse{ border-left: 0; margin: 0 40px 0 56px; padding: 0; }
.navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-nav .nav-link{ color: #fff; font-weight: 600; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-nav .nav-link:hover,.navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-nav .dropdown:hover > .nav-link{ color: #fff; }
.navbar:not(.rz-scrolled):not(.nav-scroll) .nav-cta{ border-left: 0; padding-left: 0; }
/* underline that draws in on hover (both states) */
.navbar .navbar-nav .nav-link > span{ position: relative; }
.navbar .navbar-nav .nav-link > span::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--rz-red); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.navbar .navbar-nav .nav-link:hover > span::after,.navbar .navbar-nav .dropdown:hover > .nav-link > span::after{ transform: scaleX(1); }
/* after scrolling: dark frosted bar so it stays readable on light sections */
.navbar.rz-scrolled .container,.navbar.nav-scroll .container{
        min-height: 68px;
        padding: 10px 24px !important;
        border-radius: 18px;
        background: rgba(10, 18, 34, 0.84);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
    }
.navbar.rz-scrolled .navbar-collapse,.navbar.nav-scroll .navbar-collapse{ border-left-color: rgba(255, 255, 255, 0.16); }
.navbar.rz-scrolled .navbar-nav .nav-link,.navbar.nav-scroll .navbar-nav .nav-link{ color: #fff; }
.navbar.rz-scrolled .navbar-nav .nav-link:hover,.navbar.rz-scrolled .navbar-nav .dropdown:hover > .nav-link,.navbar.nav-scroll .navbar-nav .nav-link:hover,.navbar.nav-scroll .navbar-nav .dropdown:hover > .nav-link{ color: #fff; }
.navbar.rz-scrolled .nav-cta,.navbar.nav-scroll .nav-cta{ border-left-color: rgba(255, 255, 255, 0.16); }
/* red rectangular CTA with arrow, like the mock */
.navbar .nav-cta .rz-btn:not(.outline){ height: 58px; padding: 0 28px; border-radius: 4px; font-weight: 700; box-shadow: none; }
.navbar .nav-cta .rz-btn:not(.outline):hover{ background: #fff; color: var(--rz-red); }
}
/* mobile: white burger over the photo, dark bar once scrolled */
@media (max-width: 991px){.navbar .navbar-toggler{ color: #fff; }
.navbar.rz-scrolled,.navbar.nav-scroll{ background: rgba(10, 18, 34, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
/* ---------- Hero text colour: force readable white over the photo ---------- */
/* a touch more shade behind the right-hand copy block */
/* ---------- Nav: no background at any scroll position; no scroll cue ---------- */
.navbar,.navbar.rz-scrolled,.navbar.nav-scroll{ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.navbar .container,.navbar.rz-scrolled .container,.navbar.nav-scroll .container,.navbar .navbar-nav,.navbar .navbar-collapse{ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
@media (min-width: 992px){.navbar.rz-scrolled .container,.navbar.nav-scroll .container{ border-radius: 0; padding: 10px 0 !important; min-height: 72px; }
.navbar.rz-scrolled .navbar-collapse,.navbar.nav-scroll .navbar-collapse,.navbar.rz-scrolled .nav-cta,.navbar.nav-scroll .nav-cta{ border-left: 0; }
/* once the hero has scrolled away the page is light: switch links to dark */
.navbar.rz-past .navbar-nav .nav-link{ color: #0f1226 !important; text-shadow: none; }
.navbar.rz-past .navbar-nav .nav-link:hover,.navbar.rz-past .navbar-nav .dropdown:hover > .nav-link{ color: var(--rz-red) !important; }
}
@media (max-width: 991px){.navbar.rz-past .navbar-toggler{ color: #0f1226; }
}
/* ---------- Why Rootz: heading, stats, principle cards ---------- */
/* ---------- Footer: black + red waves, three columns (rz-fx-*) ---------- */
.rz-fx{ --ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; background: #0a0a0d; color: #fff; padding: clamp(48px, 6vw, 88px) 0 0; isolation: isolate; }
.rz-fx-wave{ position: absolute; z-index: -1; pointer-events: none; }
.rz-fx-wave-a{ left: 0; top: 0; width: min(62vw, 900px); height: min(34vw, 460px); animation: rzFxFloat 14s ease-in-out infinite alternate; }
.rz-fx-wave-b{ right: 0; bottom: 0; width: min(62vw, 900px); height: min(30vw, 400px); animation: rzFxFloat 18s ease-in-out infinite alternate-reverse; }
@keyframes rzFxFloat{ from { transform: translate(0, 0) scale(1); } to { transform: translate(14px, 10px) scale(1.04); } }
.rz-fx-grid{ display: grid; grid-template-columns: 1fr minmax(320px, 1.3fr) 1fr; align-items: start; }
.rz-fx-col{ padding-top: clamp(24px, 6.5vw, 108px); }
.rz-fx-contact{ padding-right: clamp(20px, 3.5vw, 56px); }
.rz-fx-quick{ padding-left: clamp(20px, 3.5vw, 56px); }
.rz-fx-brand{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 clamp(20px, 3.5vw, 56px) 8px; border-left: 1px solid rgba(255, 255, 255, 0.14); border-right: 1px solid rgba(255, 255, 255, 0.14); margin-top: 36px; }
.rz-fx-brand{ margin-top: 0; padding-top: 0; }
.rz-fx-h{ position: relative; margin: 0 0 22px; padding-bottom: 14px; font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.rz-fx-h::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; border-radius: 4px; background: #e10000; box-shadow: 0 0 16px rgba(225, 0, 0, 0.7); }
.rz-fx-p{ margin: 0 0 18px; max-width: 340px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); }
/* icon tile */
.rz-fx-ic{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(225, 0, 0, 0.16); transition: background 0.35s, transform 0.5s var(--ease); }
.rz-fx-ic svg{ width: 19px; height: 19px; stroke: #ff2b2b; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.rz-fx-mail{ display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px; color: #fff; }
.rz-fx-mail .rz-fx-ic{ border-radius: 12px; }
.rz-fx-mail b{ font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; transition: color 0.3s; }
.rz-fx-mail:hover b{ color: #ff4d4d; }
/* bordered rows (contact list + quick links) */
.rz-fx-list,.rz-fx-qlist{ margin: 0; padding: 0; list-style: none; }
.rz-fx-list{ border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.rz-fx-list li + li{ border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rz-fx-qlist{ display: grid; gap: 12px; }
.rz-fx-qlist li a{ border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.rz-fx-list a,.rz-fx-qlist a{ position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 12px; color: #fff; transition: background 0.35s, border-color 0.35s, transform 0.4s var(--ease); }
.rz-fx-t{ flex: 1; font-size: 15.5px; font-weight: 500; }
.rz-fx-ar{ flex: none; width: 20px; height: 20px; stroke: #fff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease), stroke 0.3s; }
.rz-fx-qlist .rz-fx-ar{ stroke: #ff2b2b; }
.rz-fx-list a:hover,.rz-fx-qlist a:hover{ background: rgba(225, 0, 0, 0.14); }
.rz-fx-qlist li a:hover{ border-color: rgba(225, 0, 0, 0.7); transform: translateX(-4px); }
.rz-fx-list a:hover .rz-fx-ic,.rz-fx-qlist a:hover .rz-fx-ic{ background: #e10000; transform: scale(1.08); }
.rz-fx-list a:hover .rz-fx-ic svg,.rz-fx-qlist a:hover .rz-fx-ic svg{ stroke: #fff; }
.rz-fx-list a:hover .rz-fx-ar,.rz-fx-qlist a:hover .rz-fx-ar{ transform: translateX(5px); stroke: #fff; }
/* centre */
.rz-fx-logo{ display: block; width: min(100%, 380px); filter: drop-shadow(0 18px 40px rgba(225, 0, 0, 0.35)); }
.rz-fx-logo .rootz-logo{ display: block; width: 100%; height: auto; }
.rz-fx-q{ margin: clamp(20px, 2.4vw, 32px) 0 clamp(22px, 2.4vw, 32px); max-width: 520px; font-size: clamp(24px, 2.5vw, 38px); font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; color: #fff; }
.rz-fx-q em{ font-style: normal; color: #ff1f1f; }
.rz-fx-ctas{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.rz-fx-btn{ display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 26px; border-radius: 999px; background: #e10000; color: #fff; font-size: 15.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(225, 0, 0, 0.4); transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.3s, color 0.3s, border-color 0.3s; }
.rz-fx-btn svg{ width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rz-fx-ba{ transition: transform 0.4s var(--ease); }
.rz-fx-btn:hover{ transform: translateY(-3px); background: #fff; color: #e10000; box-shadow: 0 16px 36px rgba(255, 255, 255, 0.18); }
.rz-fx-btn:hover .rz-fx-ba{ transform: translateX(5px); }
.rz-fx-btn-o{ background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: none; }
.rz-fx-btn-o:hover{ background: #e10000; border-color: #e10000; color: #fff; box-shadow: 0 16px 36px rgba(225, 0, 0, 0.4); }
.rz-fx-ref{ margin: 26px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }
.rz-fx-ref a{ position: relative; color: #fff; font-weight: 600; padding-bottom: 3px; }
.rz-fx-ref a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #e10000; transform-origin: left; transition: transform 0.4s var(--ease); }
.rz-fx-ref a:hover::after{ transform: scaleX(0.4); }
/* bottom bar */
.rz-fx-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 56px); padding: 28px 0 34px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.rz-fx-note{ position: relative; margin: 0; max-width: 700px; padding-left: 18px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.rz-fx-note::before{ content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 4px; background: #e10000; }
.rz-fx-legal{ display: inline-flex; align-items: center; gap: 18px; padding: 14px 28px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 14.5px; white-space: nowrap; }
.rz-fx-legal a,.rz-fx-legal span{ color: #fff; }
.rz-fx-legal a{ transition: color 0.3s; }
.rz-fx-legal a:hover{ color: #ff4d4d; }
.rz-fx-legal i{ width: 1px; height: 16px; background: rgba(255, 255, 255, 0.45); }
.rz-fx a:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
/* entrance */
.rz-fx-panel.ft-armed .rz-fx-col,.rz-fx-panel.ft-armed .rz-fx-brand > *,.rz-fx-panel.ft-armed .rz-fx-bottom{ opacity: 0; transform: translateY(30px); }
.rz-fx-panel.ft-in .rz-fx-col,.rz-fx-panel.ft-in .rz-fx-brand > *,.rz-fx-panel.ft-in .rz-fx-bottom{ opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.rz-fx-panel.ft-in .rz-fx-brand > :nth-child(2){ transition-delay: 0.1s; }
.rz-fx-panel.ft-in .rz-fx-brand > :nth-child(3){ transition-delay: 0.2s; }
.rz-fx-panel.ft-in .rz-fx-brand > :nth-child(4){ transition-delay: 0.3s; }
.rz-fx-panel.ft-in .rz-fx-contact{ transition-delay: 0.2s; }
.rz-fx-panel.ft-in .rz-fx-quick{ transition-delay: 0.3s; }
.rz-fx-panel.ft-in .rz-fx-bottom{ transition-delay: 0.4s; }
@media (max-width: 1099px){.rz-fx-grid{ grid-template-columns: 1fr 1fr; gap: 40px 0; }
.rz-fx-brand{ grid-column: 1 / -1; order: -1; border: 0; padding-bottom: 20px; }
.rz-fx-col{ padding-top: 0; }
.rz-fx-contact{ padding-right: clamp(16px, 3vw, 40px); border-right: 1px solid rgba(255, 255, 255, 0.14); }
}
@media (max-width: 767px){.rz-fx-grid{ grid-template-columns: 1fr; }
.rz-fx-contact{ border-right: 0; padding-right: 0; }
.rz-fx-quick{ padding-left: 0; }
.rz-fx-btn{ height: 54px; padding: 0 20px; font-size: 14.5px; }
.rz-fx-bottom{ flex-direction: column; align-items: flex-start; }
.rz-fx-legal{ white-space: normal; flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){.rz-fx-wave{ animation: none; }
.rz-fx *,.rz-fx *::before,.rz-fx *::after{ transition-duration: 0.01ms !important; transition-delay: 0s !important; }
.rz-fx-panel.ft-armed .rz-fx-col,.rz-fx-panel.ft-armed .rz-fx-brand > *,.rz-fx-panel.ft-armed .rz-fx-bottom{ opacity: 1; transform: none; }
}
/* ---------- Footer: lighter + simpler (same three-column layout) ---------- */
/* smaller, much lighter waves, no motion */
.rz-fx-wave{ opacity: 0.32; animation: none !important; }
.rz-fx-wave-a{ width: min(40vw, 560px); height: min(20vw, 280px); }
.rz-fx-wave-b{ width: min(40vw, 560px); height: min(18vw, 250px); }
/* smaller logo, no glow */
.rz-fx-logo{ width: min(100%, 230px); filter: none; }
.rz-fx-q{ margin: 18px 0 20px; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.25; }
.rz-fx-q em{ color: #ff5a5a; }
/* quieter buttons: no icons, no glow */
.rz-fx-bi{ display: none; }
.rz-fx-btn{ height: 50px; padding: 0 22px; font-size: 14.5px; box-shadow: none; }
.rz-fx-btn:hover{ box-shadow: none; }
.rz-fx-ref{ margin-top: 18px; font-size: 13.5px; }
.rz-fx-ref a::after{ height: 1px; background: #ff5a5a; }
/* headings: small bar, no glow */
.rz-fx-h{ margin-bottom: 18px; padding-bottom: 12px; font-size: clamp(20px, 1.8vw, 26px); }
.rz-fx-h::after{ width: 28px; height: 2px; background: #ff5a5a; box-shadow: none; }
.rz-fx-col{ padding-top: clamp(16px, 3vw, 40px); }
.rz-fx-p{ font-size: 14px; }
.rz-fx-mail b{ font-size: 16px; }
/* rows: flat lists with hairlines instead of bordered cards */
.rz-fx-ic{ width: auto; height: auto; background: transparent; }
.rz-fx-ic svg{ width: 18px; height: 18px; stroke: #ff7a7a; }
.rz-fx-mail .rz-fx-ic{ border-radius: 0; }
.rz-fx-list{ border: 0; border-radius: 0; background: transparent; overflow: visible; }
.rz-fx-list li + li{ border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rz-fx-list li:first-child{ border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rz-fx-qlist{ gap: 0; }
.rz-fx-qlist li a{ border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: transparent; }
.rz-fx-qlist li:last-child a{ border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.rz-fx-list a,.rz-fx-qlist a{ padding: 12px 4px; gap: 12px; }
.rz-fx-t{ font-size: 14.5px; }
.rz-fx-qlist .rz-fx-ar{ stroke: rgba(255, 255, 255, 0.5); }
.rz-fx-ar{ width: 18px; height: 18px; }
.rz-fx-list a:hover,.rz-fx-qlist a:hover{ background: transparent; color: #ff7a7a; }
.rz-fx-qlist li a:hover{ transform: none; border-color: rgba(255, 255, 255, 0.1); }
.rz-fx-list a:hover .rz-fx-ic,.rz-fx-qlist a:hover .rz-fx-ic{ background: transparent; transform: none; }
.rz-fx-list a:hover .rz-fx-ic svg,.rz-fx-qlist a:hover .rz-fx-ic svg{ stroke: #ff7a7a; }
.rz-fx-list a:hover .rz-fx-ar,.rz-fx-qlist a:hover .rz-fx-ar{ stroke: #ff7a7a; transform: translateX(4px); }
/* bottom bar: plain text */
.rz-fx-bottom{ margin-top: clamp(24px, 3vw, 40px); padding: 18px 0 24px; border-top-color: rgba(255, 255, 255, 0.12); }
.rz-fx-note{ padding-left: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.rz-fx-note::before{ display: none; }
.rz-fx-legal{ padding: 0; border: 0; border-radius: 0; gap: 18px; font-size: 13px; }
.rz-fx-legal i{ display: none; }
.rz-fx-legal a{ color: rgba(255, 255, 255, 0.8); }
.rz-fx-legal span{ color: rgba(255, 255, 255, 0.5); }
.rz-fx{ padding-top: clamp(36px, 4.5vw, 64px); }
/* ---------- Footer: stronger text contrast + legibility ---------- */
.rz-fx{ color: #fff; }
.rz-fx-h{ color: #fff; font-weight: 600; }
.rz-fx-h::after{ background: #ff4d4d; }
.rz-fx-p{ color: rgba(255, 255, 255, 0.92); font-size: 15px; line-height: 1.65; }
.rz-fx-mail b{ color: #fff; font-size: 17px; font-weight: 600; }
.rz-fx-mail:hover b{ color: #ff8a8a; }
.rz-fx-q{ color: #fff; font-weight: 600; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); }
.rz-fx-q em{ color: #ff6b6b; }
.rz-fx-t{ color: #fff; font-size: 15.5px; font-weight: 500; }
.rz-fx-list a,.rz-fx-qlist a{ color: #fff; }
.rz-fx-list a:hover,.rz-fx-qlist a:hover{ color: #ff8a8a; }
.rz-fx-list a:hover .rz-fx-t,.rz-fx-qlist a:hover .rz-fx-t{ color: #ff8a8a; }
.rz-fx-ic svg{ stroke: #ff8a8a; }
.rz-fx-ar,.rz-fx-qlist .rz-fx-ar{ stroke: rgba(255, 255, 255, 0.85); }
.rz-fx-list li + li,.rz-fx-list li:first-child,.rz-fx-qlist li a,.rz-fx-qlist li:last-child a{ border-color: rgba(255, 255, 255, 0.22); }
.rz-fx-brand{ border-left-color: rgba(255, 255, 255, 0.22); border-right-color: rgba(255, 255, 255, 0.22); }
.rz-fx-btn{ font-weight: 700; }
.rz-fx-btn-o{ color: #fff; border-color: rgba(255, 255, 255, 0.9); }
.rz-fx-ref{ color: rgba(255, 255, 255, 0.92); font-size: 14.5px; }
.rz-fx-ref a{ color: #fff; font-weight: 700; }
.rz-fx-bottom{ border-top-color: rgba(255, 255, 255, 0.22); }
.rz-fx-note{ color: rgba(255, 255, 255, 0.85); font-size: 13.5px; line-height: 1.65; }
.rz-fx-legal a{ color: #fff; font-weight: 500; }
.rz-fx-legal a:hover{ color: #ff8a8a; }
.rz-fx-legal span{ color: rgba(255, 255, 255, 0.8); }
/* keep the (now lighter) wave decoration clear of the text */
.rz-fx-wave{ opacity: 0.22; }
/* ---------- Footer: force paragraph colours (a global `p` rule was overriding them) ---------- */
footer.rz-fx p,footer.rz-fx .rz-fx-p,footer.rz-fx .rz-fx-ref,footer.rz-fx .rz-fx-note{ color: rgba(255, 255, 255, 0.94) !important; opacity: 1 !important; }
footer.rz-fx .rz-fx-note{ color: rgba(255, 255, 255, 0.88) !important; font-size: 14px; }
footer.rz-fx .rz-fx-ref a,footer.rz-fx .rz-fx-q{ color: #fff !important; }
footer.rz-fx .rz-fx-q em{ color: #ff6b6b !important; }
footer.rz-fx .rz-fx-legal a{ color: #fff !important; }
footer.rz-fx .rz-fx-legal span{ color: rgba(255, 255, 255, 0.85) !important; }
footer.rz-fx .rz-fx-h,footer.rz-fx .rz-fx-t,footer.rz-fx .rz-fx-mail b{ color: #fff !important; }
footer.rz-fx a:hover .rz-fx-t{ color: #ff8a8a !important; }
footer.rz-fx .rz-fx-legal a:hover{ color: #ff8a8a !important; }
footer.rz-fx .rz-fx-p,footer.rz-fx .rz-fx-ref,footer.rz-fx .rz-fx-note{ text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
/* ---------- Footer: lighter charcoal instead of near-black ---------- */
footer.rz-fx{ background: #272a33; }
footer.rz-fx .rz-fx-wave{ opacity: 0.3; }
footer.rz-fx .rz-fx-p,footer.rz-fx .rz-fx-ref,footer.rz-fx .rz-fx-note{ text-shadow: none; }
/* ---------- Footer: dark navy (sampled from the reference swatch) ---------- */
footer.rz-fx{ background: #0c1422; }
/* ---------- Footer: wider middle column ---------- */
@media (min-width: 1100px){footer.rz-fx .rz-fx-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
footer.rz-fx .rz-fx-brand{ padding-left: clamp(24px, 4vw, 72px); padding-right: clamp(24px, 4vw, 72px); }
footer.rz-fx .rz-fx-q{ max-width: 780px; font-size: clamp(24px, 2.4vw, 36px); }
footer.rz-fx .rz-fx-ctas{ flex-wrap: nowrap; }
footer.rz-fx .rz-fx-ref{ max-width: 640px; }
}
/* ---------- Footer: crisp text (no glow, no transform layers) ---------- */
footer.rz-fx,footer.rz-fx *{ text-shadow: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
footer.rz-fx .rz-fx-col,footer.rz-fx .rz-fx-brand,footer.rz-fx .rz-fx-brand > *,footer.rz-fx .rz-fx-bottom,footer.rz-fx .rz-fx-panel.ft-armed .rz-fx-col,footer.rz-fx .rz-fx-panel.ft-armed .rz-fx-brand > *,footer.rz-fx .rz-fx-panel.ft-armed .rz-fx-bottom,footer.rz-fx .rz-fx-panel.ft-in .rz-fx-col,footer.rz-fx .rz-fx-panel.ft-in .rz-fx-brand > *,footer.rz-fx .rz-fx-panel.ft-in .rz-fx-bottom{
    transform: none !important; filter: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; will-change: auto;
}
/* entrance is a plain fade now */
footer.rz-fx .rz-fx-panel.ft-armed .rz-fx-col,footer.rz-fx .rz-fx-panel.ft-armed .rz-fx-brand > *,footer.rz-fx .rz-fx-panel.ft-armed .rz-fx-bottom{ opacity: 0; }
footer.rz-fx .rz-fx-panel.ft-in .rz-fx-col,footer.rz-fx .rz-fx-panel.ft-in .rz-fx-brand > *,footer.rz-fx .rz-fx-panel.ft-in .rz-fx-bottom{ opacity: 1; transition: opacity 0.8s ease; }
/* the wave decoration must never sit above the text */
footer.rz-fx .rz-fx-wave{ z-index: -1; mix-blend-mode: normal; }
footer.rz-fx .rz-fx-note,footer.rz-fx .rz-fx-p,footer.rz-fx .rz-fx-ref{ opacity: 1 !important; color: #fff !important; }
footer.rz-fx .rz-fx-note{ color: rgba(255, 255, 255, 0.92) !important; }
/* ---------- Footer waves: soft transparent orange ---------- */
footer.rz-fx .rz-fx-wave{ opacity: 0.3; }
footer.rz-fx .rz-fx-wave-a{ opacity: 0.28; }
/* ---------- Footer waves: clean translucent orange (no brown) ---------- */
footer.rz-fx .rz-fx-wave{ opacity: 0.55; }
footer.rz-fx .rz-fx-wave-a{ opacity: 0.5; }
/* ---------- Footer waves: vivid orange shade ---------- */
footer.rz-fx .rz-fx-wave{ opacity: 0.8; }
footer.rz-fx .rz-fx-wave-a{ opacity: 0.75; }
/* ---------- Footer waves: logo red (#E10000) at 0.3 / 0.1 opacity ---------- */
footer.rz-fx .rz-fx-wave,footer.rz-fx .rz-fx-wave-a{ opacity: 1; }
/* ---------- Our commitments: desk of draggable cards (rz-dd-*) ---------- */
.rz-dd{ --ease: cubic-bezier(0.22, 1, 0.36, 1); padding: clamp(56px, 7vw, 110px) 0; }
.rz-dd-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 36px); }
.rz-dd-title{ margin: 16px 0 0; font-size: clamp(34px, 4.8vw, 70px); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; }
.rz-dd-title em{ font-style: normal; color: var(--rz-red); }
.rz-dd-btn:focus-visible{ outline: 3px solid var(--rz-ink); outline-offset: 3px; }
/* the desk */
.rz-dd-desk{ position: relative; height: clamp(520px, 44vw, 600px); overflow: visible; background: none; border: 0; border-radius: 0; touch-action: pan-y; }
.rz-dd-c{ --r: 0deg; --tilt: 0deg; position: absolute; left: 0; top: 0; width: var(--cw, 290px); border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08); transform: rotate(calc(var(--r) + var(--tilt))); transform-origin: 50% 40%; cursor: grab; user-select: none; -webkit-user-select: none; transition: left 0.9s var(--ease), top 0.9s var(--ease), transform 0.9s var(--ease), box-shadow 0.4s, opacity 0.7s; outline: none; }
.rz-dd-c:hover{ box-shadow: 0 24px 54px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08); }
.rz-dd-c:focus-visible{ box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rz-red), 0 24px 54px rgba(0, 0, 0, 0.22); }
.rz-dd-c.is-drag{ cursor: grabbing; transition: box-shadow 0.3s, transform 0.12s linear; box-shadow: 0 34px 70px rgba(0, 0, 0, 0.3); }
.rz-dd-ph{ position: relative; height: 150px; overflow: hidden; }
.rz-dd-ph img{ width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rz-dd-ph::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)); }
.rz-dd-no{ position: absolute; z-index: 2; left: 16px; bottom: 8px; font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9); }
.rz-dd-bd{ padding: 16px 20px 22px; }
.rz-dd-tag{ display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: var(--rz-red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.rz-dd-c h3{ margin: 0 0 8px; font-size: clamp(21px, 1.8vw, 26px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--rz-ink); }
.rz-dd-c p{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--rz-muted); }
.rz-dd-cta{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.rz-dd-btn{ display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 30px; border-radius: 999px; background: var(--rz-red); border: 1.5px solid var(--rz-red); color: #fff; font-size: 15px; font-weight: 600; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.35s var(--ease); }
.rz-dd-btn svg{ width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease); }
.rz-dd-btn:hover{ background: var(--rz-ink); border-color: var(--rz-ink); color: #fff; transform: translateY(-2px); }
.rz-dd-btn:hover svg{ transform: translateX(4px); }
.rz-dd-btn-o{ background: transparent; border-color: rgba(0, 0, 0, 0.35); color: var(--rz-ink); }
.rz-dd-btn-o:hover{ background: var(--rz-red); border-color: var(--rz-red); color: #fff; }
/* entrance: cards drop onto the desk (armed by JS) */
.rz-dd.dd-armed .rz-dd-c{ opacity: 0; transform: translateY(70px) rotate(calc(var(--r) + 8deg)); }
/* phones / tablets: a simple stacked layout, no dragging */
@media (max-width: 767px){.rz-dd-desk{ height: auto; padding: 0; display: grid; gap: 14px; }
.rz-dd-c{ position: relative; left: auto !important; top: auto !important; width: auto; cursor: default; transform: none !important; }
.rz-dd-btn{ height: 50px; padding: 0 22px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce){.rz-dd-c,.rz-dd-c.is-drag{ transition: none; }
.rz-dd.dd-armed .rz-dd-c{ opacity: 1; transform: rotate(var(--r)); }
}
/* ---------- Trust & transparency: enhancements (tf2-*) ---------- */
/* live counter on the "Why we ask" card */
/* dark panel: privacy seal + strike lines that draw themselves */
/* entrance */
/* trust: keep the round icon badges perfectly round when the heading wraps */
/* footer Quick Links: no line above the first row or below the last row */
footer.rz-fx .rz-fx-qlist li:first-child a{ border-top: 0; }
footer.rz-fx .rz-fx-qlist li:last-child a{ border-bottom: 0; }
/* footer list arrows: point up-right (45deg) */
footer.rz-fx .rz-fx-ar{ transform: rotate(-45deg); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.3s; }
footer.rz-fx .rz-fx-list a:hover .rz-fx-ar,footer.rz-fx .rz-fx-qlist a:hover .rz-fx-ar{ transform: rotate(-45deg) translateX(5px); }
/* trust: on tablet/mobile the seal sits above the heading instead of overlapping it */
/* ---------- Header: full-width, solid white bar ---------- */
body .navbar.navbar,body .navbar.rz-scrolled,body .navbar.nav-scroll{
    left: 0; right: 0; width: 100%; max-width: none;
    background: #fff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
    transition: box-shadow 0.3s;
}
body .navbar.rz-scrolled,body .navbar.nav-scroll{ box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important; }
/* the inner row spans the whole bar (gutters only), no floating card */
body .navbar:not(.rz-scrolled):not(.nav-scroll) .container,body .navbar.rz-scrolled .container,body .navbar.nav-scroll .container{
    max-width: none !important; width: 100%;
    min-height: 84px;
    padding: 10px var(--rz-gutter) !important;
    border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
}
body .navbar.rz-scrolled .container,body .navbar.nav-scroll .container{ min-height: 72px; }
@media (min-width: 992px){/* dark links on the white bar, in every state */
body .navbar .navbar-nav .nav-link,body .navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-nav .nav-link,body .navbar.rz-scrolled .navbar-nav .nav-link,body .navbar.nav-scroll .navbar-nav .nav-link,body .navbar.rz-past .navbar-nav .nav-link{ color: #0f1226 !important; text-shadow: none !important; }
body .navbar .navbar-nav .nav-link:hover,body .navbar .navbar-nav .dropdown:hover > .nav-link{ color: var(--rz-red) !important; }
body .navbar:not(.rz-scrolled):not(.nav-scroll) .navbar-collapse,body .navbar.rz-scrolled .navbar-collapse,body .navbar.nav-scroll .navbar-collapse{ border-left: 1px solid rgba(0, 0, 0, 0.1); margin: 0 24px 0 28px; padding: 0 8px 0 28px; }
body .navbar .nav-cta{ border-left: 1px solid rgba(0, 0, 0, 0.1); padding-left: 24px; }
body .navbar .nav-cta .rz-btn:not(.outline):hover{ background: var(--rz-ink); color: #fff; }
}
/* mobile bar */
@media (max-width: 991px){body .navbar.navbar,body .navbar.rz-scrolled,body .navbar.nav-scroll{ background: #fff !important; }
body .navbar .navbar-toggler,body .navbar.rz-past .navbar-toggler{ color: #0f1226; }
}
/* ---------- Typography: one professional typeface (Inter) ---------- */
:root{
    --rz-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body,button,input,select,textarea{ font-family: var(--rz-font); }
h1,h2,h3,h4,h5,h6,p,a,li,label,small,strong,b,em,th,td,blockquote{ font-family: inherit; }
body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss03"; }
/* small uppercase labels that used a monospace face now use the same family */
.rz-ins{ --ins-mono: var(--rz-font); }
/* Inter sets a little wider than the old display face: keep very large headings from feeling cramped */
h1,h2{ letter-spacing: -0.025em; }
/* ---------- About Rootz: photo panel (ab2-*) ---------- */
.ab2{ --ease: cubic-bezier(0.22, 1, 0.36, 1); padding: clamp(48px, 6vw, 96px) 0; }
.ab2-stage{ position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 4vw, 56px); min-height: clamp(600px, 52vw, 740px); padding: clamp(22px, 3.2vw, 48px); overflow: hidden; border-radius: clamp(30px, 3.4vw, 52px); background: #0c1422; color: #fff; isolation: isolate; }
.ab2-img{ position: absolute; left: 0; top: -6%; z-index: -2; width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: center 35%; will-change: transform; }
.ab2-shade{ position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 14, 26, 0.9) 0%, rgba(8, 14, 26, 0.62) 55%, rgba(8, 14, 26, 0.3) 100%), linear-gradient(180deg, rgba(8, 14, 26, 0.45), transparent 30%, rgba(8, 14, 26, 0.6) 100%); }
.ab2-top{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ab2-eyebrow{ display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.45); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ab2-eyebrow i{ width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 4px rgba(255, 59, 59, 0.25); }
.ab2-pair{ font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
.ab2-pair b{ margin: 0 6px; color: #ff5a5a; font-weight: 600; }
.ab2-statement{ margin: 0; max-width: 1020px; font-size: clamp(28px, 4.1vw, 66px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: #fff; }
.ab2-statement mark{ padding: 0; background: linear-gradient(transparent 66%, rgba(225, 0, 0, 0.85) 66%); color: inherit; background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1s var(--ease) 0.5s; }
.ab2.ab2-in .ab2-statement mark,.ab2:not(.ab2-armed) .ab2-statement mark{ background-size: 100% 100%; }
.ab2-bottom{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.ab2-tag{ display: flex; align-items: center; gap: 16px; }
.ab2-tag svg{ width: 30px; height: 50px; flex: none; }
.ab2-tag p{ margin: 0; max-width: 220px; font-size: 18px; font-weight: 500; line-height: 1.3; color: #fff !important; }
.ab2-card{ width: min(100%, 620px); padding: clamp(18px, 2vw, 26px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ab2-route{ display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.ab2-city{ font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.ab2-line{ position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 12px); }
.ab2-line i{ position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #ff2b2b; box-shadow: 0 0 0 5px rgba(255, 43, 43, 0.3); animation: ab2Travel 3.6s var(--ease) infinite alternate; }
@keyframes ab2Travel{ to { left: calc(100% - 12px); } }
.ab2-facts{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.ab2-fact h6{ margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff8a8a; }
.ab2-fact p{ margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.95) !important; }
/* entrance (armed by JS) */
.ab2.ab2-armed .ab2-top,.ab2.ab2-armed .ab2-statement,.ab2.ab2-armed .ab2-bottom{ opacity: 0; transform: translateY(30px); }
.ab2.ab2-in .ab2-top,.ab2.ab2-in .ab2-statement,.ab2.ab2-in .ab2-bottom{ opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.ab2.ab2-in .ab2-statement{ transition-delay: 0.12s; }
.ab2.ab2-in .ab2-bottom{ transition-delay: 0.28s; }
@media (max-width: 767px){.ab2-stage{ min-height: 0; padding: 20px; }
.ab2-facts{ grid-template-columns: 1fr; }
.ab2-card{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){.ab2-line i{ animation: none; left: calc(50% - 6px); }
.ab2 *,.ab2 *::before{ transition-duration: 0.01ms !important; transition-delay: 0s !important; }
.ab2.ab2-armed .ab2-top,.ab2.ab2-armed .ab2-statement,.ab2.ab2-armed .ab2-bottom{ opacity: 1; transform: none; }
.ab2-statement mark{ background-size: 100% 100%; }
}
/* ---------- Why Rootz: two cities + fact row (wk-*) ---------- */
.wk{ --ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; isolation: isolate; padding: clamp(64px, 7vw, 116px) 0 clamp(56px, 6vw, 100px); background: radial-gradient(900px 520px at 88% 6%, #FCECEA 0%, rgba(253, 230, 234, 0) 62%), linear-gradient(180deg, #ffffff 0%, #FBF3F3 100%); }
/* decorative ribbons and waves */
.wk-top{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 56px); align-items: center; }
.wk-eyebrow{ display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #B80000; }
.wk-eyebrow i{ width: 36px; height: 2px; background: #B80000; }
.wk-title{ margin: 22px 0 20px; font-size: clamp(40px, 5.6vw, 88px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; color: #161616; }
.wk-title em{ font-style: normal; color: #E10000; }
.wk-lead{ margin: 0 0 clamp(24px, 3vw, 36px); max-width: 480px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: #585858; }
.wk-btn{ display: inline-flex; align-items: center; gap: 14px; height: 58px; padding: 0 30px; border-radius: 12px; background: linear-gradient(180deg, #E10000, #B80000); color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 14px 30px rgba(200, 16, 46, 0.3); transition: transform 0.35s var(--ease), box-shadow 0.35s, background 0.3s; }
.wk-btn svg{ width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease); }
.wk-btn:hover{ transform: translateY(-3px); box-shadow: 0 20px 38px rgba(200, 16, 46, 0.38); color: #fff; }
.wk-btn:hover svg{ transform: translateX(5px); }
.wk-btn:focus-visible{ outline: 3px solid #161616; outline-offset: 3px; }
/* two slanted city photos */
.wk-photos{ position: relative; height: clamp(260px, 30vw, 440px); margin-right: calc(var(--rz-gutter, 40px) * -1); }
.wk-ph{ position: absolute; top: 0; height: 100%; margin: 0; overflow: hidden; border-radius: 36px; border: 3px solid #fff; background: #1a2336; box-shadow: 0 28px 60px rgba(90, 10, 30, 0.3); transform: skewX(-17deg); transition: transform 0.8s var(--ease), box-shadow 0.6s; }
.wk-ph img{ position: absolute; left: -22%; top: 0; width: 144%; height: 100%; max-width: none; object-fit: cover; transform: skewX(17deg) scale(1.08); transition: transform 1.6s var(--ease); }
.wk-ph-sg{ left: 2%; width: 62%; z-index: 1; top: 8%; height: 90%; }
.wk-ph-vn{ left: 49%; width: 66%; z-index: 2; top: -4%; height: 104%; }
.wk-ph:hover img{ transform: skewX(17deg) scale(1.16); }
.wk-ph:hover{ box-shadow: 0 36px 72px rgba(90, 10, 30, 0.38); }
.wk-pill{ position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px 11px 14px; border-radius: 999px; background: #fff; font-size: clamp(14px, 1.2vw, 18px); font-weight: 600; color: #161616; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.wk-pill svg{ width: 20px; height: 20px; stroke: #E10000; fill: #E10000; stroke-width: 1.4; }
.wk-pill svg circle{ fill: #fff; stroke: none; }
.wk-pill-sg{ left: 40%; top: 16%; }
.wk-pill-vn{ left: 76%; top: 74%; }
/* facts row */
.wk-facts{ display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(30px, 4vw, 60px) 0 0; padding: 0; list-style: none; }
.wk-f{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(12px, 1.4vw, 20px); align-items: start; padding: 6px clamp(14px, 1.8vw, 26px) 0 0; }
.wk-f + .wk-f{ padding-left: clamp(14px, 1.8vw, 28px); border-left: 1px solid rgba(15, 18, 38, 0.12); }
.wk-ic{ display: flex; align-items: center; justify-content: center; width: clamp(56px, 5vw, 76px); height: clamp(56px, 5vw, 76px); border-radius: 18px; background: #FCECEA; transition: background 0.35s, transform 0.5s var(--ease); }
.wk-ic svg{ width: 52%; height: 52%; stroke: #E10000; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.wk-f:hover .wk-ic{ background: #E10000; transform: translateY(-4px) rotate(-4deg); }
.wk-f:hover .wk-ic svg{ stroke: #fff; }
.wk-fig{ display: block; font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: #161616; }
.wk-lab{ display: block; margin: 6px 0 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #E10000; }
.wk-tx p{ margin: 0; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.5; color: #585858 !important; }
/* the description sits under the icon+title row, aligned with the title */
.wk-f .wk-tx{ grid-column: 2; }
/* entrance (armed by JS) */
.wk.wk-armed .wk-copy > *,.wk.wk-armed .wk-f{ opacity: 0; transform: translateY(30px); }
.wk.wk-armed .wk-ph-sg{ opacity: 0; transform: skewX(-17deg) translateX(-60px); }
.wk.wk-armed .wk-ph-vn{ opacity: 0; transform: skewX(-17deg) translateX(90px); }
.wk.wk-armed .wk-pill{ opacity: 0; transform: translateY(14px); }
.wk.wk-in .wk-copy > *,.wk.wk-in .wk-f{ opacity: 1; transform: none; transition: opacity 0.9s var(--ease) calc(var(--d, 0) * 100ms), transform 1s var(--ease) calc(var(--d, 0) * 100ms); }
.wk.wk-in .wk-ph{ opacity: 1; transition: opacity 1s var(--ease) 0.15s, transform 1.2s var(--ease) 0.15s, box-shadow 0.6s; }
.wk.wk-in .wk-ph-vn{ transition-delay: 0.3s; }
.wk.wk-in .wk-pill{ opacity: 1; transform: none; transition: opacity 0.7s var(--ease) 0.9s, transform 0.8s var(--ease) 0.9s; }
@media (max-width: 991px){.wk-top{ grid-template-columns: 1fr; gap: 28px; }
.wk-photos{ margin-right: 0; height: clamp(240px, 52vw, 380px); }
.wk-facts{ grid-template-columns: 1fr 1fr; row-gap: 28px; }
.wk-f:nth-child(3){ padding-left: 0; border-left: 0; }
}
@media (max-width: 575px){.wk-facts{ grid-template-columns: 1fr; }
.wk-f,.wk-f + .wk-f{ padding-left: 0; border-left: 0; }
.wk-ph{ border-radius: 24px; }
.wk-pill{ padding: 8px 14px 8px 10px; }
}
@media (prefers-reduced-motion: reduce){.wk *,.wk *::before{ transition-duration: 0.01ms !important; transition-delay: 0s !important; }
.wk.wk-armed .wk-copy > *,.wk.wk-armed .wk-f,.wk.wk-armed .wk-pill{ opacity: 1; transform: none; }
.wk.wk-armed .wk-ph-sg,.wk.wk-armed .wk-ph-vn{ opacity: 1; transform: skewX(-17deg); }
}
/* frame the city photos so the landmarks sit in the visible slant */
.wk-ph-sg img{ object-position: 50% 14%; }
.wk-ph-vn img{ object-position: 52% 38%; }
/* on tablet and phone keep the ribbons out of the text */