/* =====================================================================
   Rootz: professional design system layer
   Loaded last. Unifies type, labels, buttons, colour, rhythm and states
   across every section so the page reads as one composed system.
   ===================================================================== */

:root {
    --pro-section-y: clamp(72px, 8vw, 128px);
    --pro-h2: clamp(34px, 4.4vw, 64px);
    --pro-radius-card: 24px;
}

/* ---------- Colour: one brand red, one ink, one muted grey ---------- */
::selection { background: var(--rz-red); color: #fff; }

/* ---------- Focus: one consistent, visible ring ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--rz-red); outline-offset: 3px; }

/* ---------- Section labels (eyebrows): one style everywhere ---------- */
body .hero-eyebrow,
body .hero-style3 .hero-eyebrow,
body .ins-eyebrow,
body .rz-h3-eyebrow,
body .wk-eyebrow,
body .rt2-head .butn-bord-sm {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    color: var(--rz-red) !important;
}
body .hero-eyebrow i,
body .hero-style3 .hero-eyebrow i,
body .ins-eyebrow i,
body .rz-h3-eyebrow i,
body .wk-eyebrow i {
    display: inline-block;
    width: 28px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: var(--rz-red) !important;
    box-shadow: none !important;
    animation: none !important;
}
body .rt2-head .butn-bord-sm::before { content: ""; display: inline-block; width: 28px; height: 2px; border-radius: 2px; background: var(--rz-red); }

/* ---------- Section headings: one scale, one weight ---------- */
body .rt2-title,
body .rz-gl-title,
body .wk-title,
body #ins-title {
    font-size: var(--pro-h2) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    color: var(--rz-ink);
}
body .rz-choose-title { font-size: clamp(30px, 3.6vw, 52px) !important; font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: -0.028em !important; }
body .rt2-title span, body .rz-gl-title em, body .wk-title em { font-style: normal; color: var(--rz-red); }

/* ---------- Buttons: one shape (pill), one weight, quiet shadows ---------- */
body .wk-btn {
    height: 54px;
    padding: 0 28px;
    border-radius: 999px !important;
    background: var(--rz-red) !important;
    border: 1.5px solid var(--rz-red);
    box-shadow: none !important;
    font-weight: 600;
}
body .wk-btn:hover { background: var(--rz-ink) !important; border-color: var(--rz-ink); box-shadow: none !important; }
body .rz-btn.sm, body .rz-btn { font-weight: 600; }

/* ---------- Section rhythm: the same vertical spacing on every section ---------- */
body .ab2,
body .rz-rt2,
body .wk,
body .rz-gl,
body .rz-ins { padding-top: var(--pro-section-y) !important; padding-bottom: var(--pro-section-y) !important; }

/* ---------- Brand red inside the "Why Rootz" section (was a slightly different red) ---------- */
body .wk-lab, body .wk-eyebrow { color: var(--rz-red); }
body .wk-pill svg { stroke: var(--rz-red); fill: var(--rz-red); }

/* ---------- Quiet the heaviest effects so content leads ---------- */
body .rz-gl-c:hover { transform: translateY(-8px) scale(1.02); }

/* if a remote photo ever fails, the frame stays a clean dark panel instead of showing a broken-image icon */
body .wk-ph { background: linear-gradient(135deg, #1a2336, #0c1422); }

/* keep the gallery headline on one line so no word is left alone */
body .rz-gl-title { max-width: 1100px !important; }

/* mobile menu: solid white panel (an earlier rule forced every nav layer transparent) */
@media (max-width: 991px) {
    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,
    html body .navbar.rz-past .navbar-collapse,
    html body .navbar.rz-open .navbar-collapse {
        background: #fff !important;
        box-shadow: 0 24px 40px rgba(0, 0, 0, 0.14) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        margin: 0 !important;
        padding: 6px 0 18px !important;
        border-left: 0 !important;
    }
    html body .navbar .navbar-collapse .nav-link,
    html body .navbar .navbar-collapse .dropdown-item { color: #161616 !important; }
    html body .navbar .navbar-collapse .dropdown-menu { background: #f7f7f8 !important; }
}