/* =========================================================================
   Revelations Roofing — dark theme, contrast repair and motion primitives.

   Loaded last (see rr-experience.php) so it wins the cascade over WoodMart,
   Elementor and the theme custom CSS in post 31.

   CONTRAST RULES OF THE PALETTE (measured against --rr-bg #0A0A0A):
     --rr-text        #F4F4F4  16.7:1   body/headings
     --rr-text-muted  #C4C4C4  11.3:1   paragraphs
     --rr-text-dim    #9E9E9E   7.4:1   meta/captions only
     --rr-red-on-dark #FF4D4D   6.4:1   ALL red text, icons and rules
     --rr-red         #C00000   3.2:1   FILLS ONLY — never as text on black.
                                        White on it is 6.5:1, so it stays the
                                        button/badge colour.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
    --rr-black: #070707;
    --rr-bg: #0A0A0A;
    --rr-bg-raised: #101010;
    --rr-surface: rgba(255, 255, 255, .045);
    --rr-surface-hi: rgba(255, 255, 255, .075);
    --rr-line: rgba(255, 255, 255, .10);
    --rr-line-hi: rgba(255, 255, 255, .20);

    --rr-red: #C00000;
    --rr-red-deep: #9E0000;
    --rr-red-on-dark: #FF4D4D;
    --rr-red-glow: rgba(192, 0, 0, .38);

    --rr-text: #F4F4F4;
    --rr-text-muted: #C4C4C4;
    --rr-text-dim: #9E9E9E;
    --rr-star: #FFC107;

    --rr-ease: cubic-bezier(.22, .61, .36, 1);
    --rr-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* WoodMart drives most of its own chrome from these. Redeclaring them on
   `body` rather than `:root` means they beat the theme own :root block
   regardless of which stylesheet the browser sees first. */
body {
    --wd-text-color: var(--rr-text-muted);
    --wd-title-color: var(--rr-text);
    --wd-entities-title-color: var(--rr-text);
    --wd-entities-title-color-hover: var(--rr-red-on-dark);
    --wd-link-color: var(--rr-text);
    --wd-link-color-hover: var(--rr-red-on-dark);
    --wd-widget-title-color: var(--rr-text);
    --wd-primary-color: var(--rr-red);
    --wd-alternative-color: var(--rr-red);
}

/* ------------------------------------------------------------- 1. canvas */
html,
body {
    background-color: var(--rr-bg) !important;
    color: var(--rr-text-muted);
}

html { scroll-behavior: smooth; }

body .website-wrapper,
body .main-page-wrapper,
body .site-content,
body #main,
body .page-wrapper,
body .content-layout-wrapper {
    background-color: transparent !important;
}

/* The "opaque", not-flat black the brief asked for: three very soft colour
   fields plus a faint diagonal weave, fixed behind every page.

   All four gradients live on ONE pseudo-element on purpose. Splitting the
   weave onto ::after cost a second full-viewport composited layer for no
   visual gain. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .009) 0 1px, transparent 1px 7px),
        radial-gradient(880px 620px at 10% -8%, rgba(192, 0, 0, .20), transparent 62%),
        radial-gradient(1100px 720px at 102% 10%, rgba(150, 150, 165, .09), transparent 60%),
        radial-gradient(820px 820px at 48% 106%, rgba(192, 0, 0, .14), transparent 62%);
}

/* Content rides above the ambient layers. */
body .website-wrapper { position: relative; z-index: 1; }

/* ------------------------------------------------- 2. text contrast fixes
   The Elementor kit ships #3E3E3E body copy, #003D8D eyebrows and #7A7A7A
   captions — 1.9:1 to 4.6:1 once the page went black. */
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p,
body .elementor-widget-text-editor li,
body .elementor-widget-text-editor span,
body .elementor-text-editor,
body .wd-text-block,
body .elementor-widget-theme-post-content p,
body .info-box-inner p,
body .elementor-widget-icon-list .elementor-icon-list-text {
    color: var(--rr-text-muted) !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .elementor-heading-title,
body .info-box-title,
body .title,
body .widget-title,
body .elementor-counter-title,
body .elementor-icon-box-title {
    color: var(--rr-text);
}

/* Section eyebrows ("WHY CHOOSE US", "OUR PRODUCTS") */
body .title-subtitle,
body .elementor-widget-wd_title .title-subtitle {
    color: var(--rr-red-on-dark) !important;
}

/* Anything the kit painted in brand red as *text* moves to the lighter red. */
body .elementor-counter-number,
body .elementor-counter-number-prefix,
body .elementor-counter-number-suffix,
body .wd-nav-main > li.current-menu-item > a,
body .wd-nav-main > li.current-menu-item > a .nav-link-text,
body .wd-nav-main > li > a:hover,
body .wd-nav-main > li > a:hover .nav-link-text,
body .wd-nav-main > li:hover > a,
body .wd-nav-mobile > li.current-menu-item > a,
body .wd-nav-mobile > li > a:hover {
    color: var(--rr-red-on-dark) !important;
}

body a { color: inherit; transition: color .25s var(--rr-ease); }
body .elementor-widget-text-editor a,
body p a:not(.elementor-button):not(.btn) {
    color: var(--rr-red-on-dark);
    text-underline-offset: 3px;
}
body .elementor-widget-text-editor a:hover,
body p a:not(.elementor-button):not(.btn):hover { color: #FF8080; }

/* List/check icons: the kit green #209026 sits at 4.8:1 — lift it clear. */
body .elementor-icon-list-icon i,
body .list-icon,
body .elementor-widget-icon-list .elementor-icon-list-icon svg {
    color: #4ED16A !important;
    fill: #4ED16A !important;
}

/* Captions and form hints */
body .wd-entities-title,
body figcaption,
body .elementor-image-caption { color: var(--rr-text-dim); }

/* -------------------------------------------------------- 3. the red band
   #contact-box keeps its red fill; white-on-red is 6.5:1. The ID selectors
   here outrank the generic rules above, so the band is unaffected by them. */
#contact-box, #contact-box p, #contact-box span, #contact-box a,
#contact-box h1, #contact-box h2, #contact-box h3,
#contact-box h4, #contact-box h5, #contact-box h6,
#contact-box .info-box-title, #contact-box .info-box-inner {
    color: #ffffff !important;
}
#contact-box .elementor-button,
#contact-box .elementor-button span,
#contact-box .btn { color: #1A1A1A !important; }
#contact-box .elementor-icon,
#contact-box .box-icon-wrapper i { color: #ffffff !important; }

/* ------------------------------------------------------------- 4. header */
body .whb-header,
body .whb-main-header { background-color: transparent !important; }

body .whb-general-header,
body .whb-top-bar { background-color: transparent !important; }

body .whb-main-header {
    transition: background-color .4s var(--rr-ease), box-shadow .4s var(--rr-ease),
                backdrop-filter .4s var(--rr-ease);
}

/* Solid glass once the page has scrolled past the hero fold. */
body.rr-scrolled .whb-main-header,
body .whb-sticked .whb-main-header {
    background-color: rgba(7, 7, 7, .82) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
    border-bottom: 1px solid var(--rr-line);
}

/* The nav "pill" was solid white with dark links — now glass with light ones. */
body ul#menu-master-menu {
    background-color: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--rr-line);
    transition: background-color .3s var(--rr-ease), border-color .3s var(--rr-ease);
}
body ul#menu-master-menu:hover { border-color: var(--rr-line-hi); }

body .wd-nav-main > li > a,
body .wd-nav-main > li > a .nav-link-text { color: var(--rr-text); }

/* Underline that grows out from the centre on hover. */
body .wd-nav-main > li > a .nav-link-text { position: relative; }
body .wd-nav-main > li > a .nav-link-text::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--rr-red-on-dark);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width .3s var(--rr-ease-out);
}
body .wd-nav-main > li > a:hover .nav-link-text::after,
body .wd-nav-main > li.current-menu-item > a .nav-link-text::after { width: 100%; }

/* The "GET A QUOTE" nav item keeps its red fill — white label on it is 6.5:1. */
body .menu-item-23 span.nav-link-text {
    color: #ffffff !important;
    transition: background-color .25s var(--rr-ease), box-shadow .25s var(--rr-ease);
}
body .menu-item-23 span.nav-link-text::after { display: none; }
body .menu-item-23 > a:hover span.nav-link-text {
    background-color: var(--rr-red-deep);
    box-shadow: 0 8px 22px var(--rr-red-glow);
}

/* The wordmark now uses the light-on-dark artwork, so drop the white halo
   that was compensating for black type on a dark photo. */
body .whb-header .wd-logo img,
body .whb-general-header .wd-logo img { filter: none; }
body .wd-logo img { border-radius: 0; }

/* Mobile drawer */
body .wd-close-side,
body .wd-side-hidden { background-color: var(--rr-black) !important; }
body .wd-nav-mobile > li > a { color: var(--rr-text) !important; }
body .wd-nav-mobile > li { border-color: var(--rr-line) !important; }

/* ------------------------------------------------------------ 5. buttons */
body .elementor-button,
body .btn,
body .rr-hero-btn,
body input[type="submit"],
body .wpcf7-submit {
    position: relative;
    overflow: hidden;
    transition: background-color .28s var(--rr-ease),
                color .28s var(--rr-ease),
                box-shadow .32s var(--rr-ease),
                transform .32s var(--rr-ease-out);
}

/* A light sweep that crosses the button on hover. */
body .elementor-button::before,
body .rr-hero-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
body .elementor-button:hover::before,
body .rr-hero-btn:hover::before { animation: rr-sweep .75s var(--rr-ease-out); }

@keyframes rr-sweep {
    from { left: -130%; }
    to   { left: 130%; }
}

body .elementor-button:hover,
body .rr-hero-btn:hover,
body .wpcf7-submit:hover { box-shadow: 0 14px 30px var(--rr-red-glow); }

/* The one white button on the home page: as an outline it reads on black and
   stops competing with the red primary CTA beside it. */
body .elementor-element-15147e0 .elementor-button {
    background-color: transparent;
    color: var(--rr-text);
    border: 2px solid var(--rr-line-hi);
}
body .elementor-element-15147e0 .elementor-button:hover {
    background-color: rgba(255, 255, 255, .10);
    border-color: var(--rr-red-on-dark);
    color: #ffffff;
    box-shadow: none;
}

/* ------------------------------------------------- 6. panels and surfaces */
body #box-sec .info-box-content {
    background: var(--rr-surface);
    border: 1px solid var(--rr-line);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
    transition: background-color .3s var(--rr-ease), border-color .3s var(--rr-ease),
                transform .4s var(--rr-ease-out), box-shadow .4s var(--rr-ease);
}
body #box-sec .info-box-content:hover {
    background: var(--rr-surface-hi);
    border-color: rgba(255, 77, 77, .45);
    transform: translateY(-6px);
}
body #box-sec .box-icon-wrapper i,
body #box-sec .box-icon-wrapper svg {
    color: var(--rr-red-on-dark) !important;
    fill: var(--rr-red-on-dark) !important;
}

/* Partner logo plates stay light — the supplied artwork is dark-on-transparent
   — but they are knocked back so they sit in the black rather than glare. */
body .rr-brand {
    background: rgba(255, 255, 255, .90) !important;
    border: 1px solid rgba(255, 255, 255, .14);
    transition: transform .3s var(--rr-ease-out), box-shadow .3s var(--rr-ease),
                background-color .3s var(--rr-ease);
}
body .rr-brand:hover {
    background: #ffffff !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 77, 77, .5);
}

/* Review cards: white cards on black were the harshest surface on the page. */
body .rr-cat-card {
    background: var(--rr-surface) !important;
    border: 1px solid var(--rr-line) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .5) !important;
    transition: border-color .3s var(--rr-ease), transform .4s var(--rr-ease-out),
                background-color .3s var(--rr-ease);
}
body .rr-cat-card:hover {
    background: var(--rr-surface-hi) !important;
    border-color: rgba(255, 77, 77, .4) !important;
}
body .rr-cat-name, body .rr-cat-title { color: var(--rr-text) !important; }
body .rr-cat-text { color: var(--rr-text-muted) !important; }
body .rr-cat-date { color: var(--rr-text-dim) !important; }
body .rr-cat-cat {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--rr-text-muted) !important;
}
body .rr-cat-stars i.off { color: rgba(255, 255, 255, .22) !important; }
body .rr-cat-sub { color: var(--rr-text-muted) !important; }
body .rr-cat-arrow { transition: background-color .25s var(--rr-ease), transform .25s var(--rr-ease-out); }
body .rr-cat-more { color: var(--rr-text) !important; }
body .rr-cat-more:hover { color: var(--rr-red-on-dark) !important; }

/* Service tiles */
body .rr-tile { transition: box-shadow .35s var(--rr-ease), transform .45s var(--rr-ease-out); }
body .rr-tile:hover { box-shadow: 0 22px 46px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 77, 77, .45); }
body .rr-tile::before { transition: background .4s var(--rr-ease); }
body .rr-tile:hover::before {
    background: linear-gradient(to top, rgba(120, 0, 0, .78), rgba(0, 0, 0, .18));
}

/* Portfolio / gallery items get the same lift. */
body .vp-portfolio__item,
body .galleryimg img {
    transition: transform .45s var(--rr-ease-out), box-shadow .45s var(--rr-ease),
                filter .45s var(--rr-ease);
}
body .galleryimg img { filter: saturate(.92) brightness(.92); }
body .galleryimg img:hover { filter: none; transform: scale(1.03); }

/* -------------------------------------------------------------- 7. forms */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="search"],
body input[type="password"],
body textarea,
body select,
body .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]) {
    background-color: rgba(255, 255, 255, .05) !important;
    color: var(--rr-text) !important;
    border: 1px solid var(--rr-line-hi) !important;
    transition: border-color .25s var(--rr-ease), background-color .25s var(--rr-ease),
                box-shadow .25s var(--rr-ease);
}
body input:focus, body textarea:focus, body select:focus {
    border-color: var(--rr-red-on-dark) !important;
    background-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .18) !important;
    outline: none;
}
body ::placeholder { color: var(--rr-text-dim) !important; opacity: 1 !important; }
body #ft-sec input.wpcf7-form-control.wpcf7-text::placeholder { color: var(--rr-text-dim) !important; }

body div#form-clm {
    border-color: rgba(255, 77, 77, .55);
    background: var(--rr-surface);
}
body .newsletter-form { background-color: rgba(255, 255, 255, .07) !important; }
body select option { background-color: #141414; color: var(--rr-text); }

body .wpcf7-not-valid-tip { color: #FF8080 !important; }
body .wpcf7-response-output { color: var(--rr-text) !important; border-color: var(--rr-line-hi) !important; }

/* ------------------------------------------------------------- 8. footer */
body footer section,
body footer div,
body .footer-container,
body .wd-footer,
body .elementor-184 .elementor-element-c092e41,
body .elementor-184 .elementor-element-c092e41:not(.elementor-motion-effects-element-type-background) {
    background-color: transparent !important;
}
body .footer-container,
body .wd-footer {
    background-color: var(--rr-black) !important;
    border-top: 1px solid var(--rr-line);
    position: relative;
}
/* Red hairline where the footer meets the page. */
body .footer-container::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--rr-red), var(--rr-red-on-dark), var(--rr-red), transparent);
}
body .footer-container h1, body .footer-container h2, body .footer-container h3,
body .footer-container h4, body .footer-container h5, body .footer-container h6 {
    color: var(--rr-text) !important;
}
body .footer-container p,
body .footer-container li,
body .footer-container .elementor-icon-list-text { color: var(--rr-text-muted) !important; }
body .footer-container a:hover { color: var(--rr-red-on-dark) !important; }

body .footer-container .elementor-social-icon {
    background-color: rgba(255, 255, 255, .08) !important;
    border: 1px solid var(--rr-line-hi);
    transition: background-color .28s var(--rr-ease), transform .28s var(--rr-ease-out),
                box-shadow .28s var(--rr-ease);
}
body .footer-container .elementor-social-icon i { color: var(--rr-text) !important; }
body .footer-container .elementor-social-icon:hover {
    background-color: var(--rr-red) !important;
    border-color: var(--rr-red);
    transform: translateY(-4px);
    box-shadow: 0 12px 26px var(--rr-red-glow);
}
body .footer-container .elementor-social-icon:hover i { color: #ffffff !important; }

body .wd-social-icons.social-follow { background-color: transparent !important; }
body .icons-design-colored .wd-social-icon {
    transition: transform .25s var(--rr-ease-out), box-shadow .25s var(--rr-ease);
}
body .icons-design-colored .wd-social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px var(--rr-red-glow);
}

/* ------------------------------------------ 9. page titles / inner pages */
body .page-title,
body .title-wrapper { background-color: transparent !important; }
body .page-title .entry-title,
body .page-title .wd-title-text { color: var(--rr-text) !important; }
body .breadcrumbs, body .breadcrumbs a { color: var(--rr-text-dim) !important; }
body .breadcrumbs a:hover { color: var(--rr-red-on-dark) !important; }

/* Horizontal rules and Elementor dividers */
body hr, body .elementor-divider-separator { border-color: var(--rr-line) !important; }

/* Scrollbar */
body ::-webkit-scrollbar { width: 11px; height: 11px; }
body ::-webkit-scrollbar-track { background: #0E0E0E; }
body ::-webkit-scrollbar-thumb { background: #2E2E2E; border-radius: 8px; }
body ::-webkit-scrollbar-thumb:hover { background: var(--rr-red); }
html { scrollbar-color: #2E2E2E #0E0E0E; }

/* Text selection */
body ::selection { background: var(--rr-red); color: #ffffff; }

/* ---------------------------------------------------- 10. focus visibility
   The theme removed focus rings; keyboard users had no indicator at all. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible,
body .elementor-button:focus-visible,
body [tabindex]:focus-visible {
    outline: 3px solid var(--rr-red-on-dark) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}

/* Skip link for keyboard users */
.rr-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--rr-red);
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
}
.rr-skip:focus { left: 0; }

/* ======================================================================
   MOTION
   All of it is opacity/transform only, so it stays on the compositor.
   `.rr-motion` is added to <html> by an inline head script, so if JS is
   off or fails nothing is ever hidden.
   ====================================================================== */

/* No `will-change` here on purpose. The home page tags roughly forty reveal
   targets, and promoting all of them to their own GPU layer before a single
   one has animated costs far more than it saves. A transition on transform
   and opacity is composited for its duration regardless. */
.rr-motion [data-rr-reveal] {
    opacity: 0;
    transition: opacity .7s var(--rr-ease-out), transform .7s var(--rr-ease-out);
    transition-delay: var(--rr-delay, 0ms);
}
.rr-motion [data-rr-reveal="up"]    { transform: translate3d(0, 34px, 0); }
.rr-motion [data-rr-reveal="left"]  { transform: translate3d(-42px, 0, 0); }
.rr-motion [data-rr-reveal="right"] { transform: translate3d(42px, 0, 0); }
.rr-motion [data-rr-reveal="zoom"]  { transform: scale(.92); }
.rr-motion [data-rr-reveal].rr-in   { opacity: 1; transform: none; }

/* Hero intro, played once on load. */
.rr-motion .rr-hero-inner > * {
    opacity: 0;
    animation: rr-rise .9s var(--rr-ease-out) forwards;
    animation-delay: calc(var(--rr-i, 0) * 110ms + 120ms);
}
@keyframes rr-rise {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}

/* Scroll hint under the hero. */
.rr-motion .rr-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-radius: 14px;
    z-index: 3;
}
.rr-motion .rr-hero .rr-scroll-dot {
    position: absolute;
    left: 50%;
    bottom: 56px;
    width: 4px;
    height: 7px;
    margin-left: -2px;
    border-radius: 2px;
    background: #ffffff;
    z-index: 4;
    animation: rr-scroll-hint 1.9s var(--rr-ease) infinite;
}
@keyframes rr-scroll-hint {
    0%   { opacity: 0; transform: translateY(-6px); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(8px); }
}

/* Scroll progress bar */
#rr-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    transform: scaleX(var(--rr-p, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--rr-red), var(--rr-red-on-dark));
    will-change: transform;
}

/* Pointer spotlight — sits behind the content so it washes through the
   transparent sections instead of over the type. */
#rr-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 640px;
    height: 640px;
    margin: -320px 0 0 -320px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle,
        rgba(192, 0, 0, .30) 0%,
        rgba(192, 0, 0, .13) 38%,
        transparent 70%);
    transform: translate3d(var(--rr-gx, -999px), var(--rr-gy, -999px), 0);
    transition: opacity .5s var(--rr-ease);
    will-change: transform;
}
body.rr-pointer #rr-glow { opacity: 1; }

/* A small ring that trails the cursor with a little lag. */
#rr-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 1.5px solid rgba(255, 77, 77, .75);
    border-radius: 50%;
    z-index: 99998;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--rr-rx, -999px), var(--rr-ry, -999px), 0) scale(var(--rr-rs, 1));
    transition: opacity .35s var(--rr-ease), background-color .25s var(--rr-ease),
                border-color .25s var(--rr-ease);
    will-change: transform;
}
body.rr-pointer #rr-ring { opacity: 1; }
body.rr-pointer.rr-hot #rr-ring {
    background: rgba(255, 77, 77, .14);
    border-color: rgba(255, 77, 77, 1);
}

/* Per-element pointer highlight: a soft light that tracks the cursor inside
   the card. --rr-mx/--rr-my are written by rr-motion.js. */
.rr-glow { position: relative; }
.rr-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    transition: opacity .35s var(--rr-ease);
    background: radial-gradient(260px circle at var(--rr-mx, 50%) var(--rr-my, 50%),
        rgba(255, 77, 77, .22), transparent 62%);
}
.rr-glow:hover::after { opacity: 1; }
/* On the white partner plates a red wash would muddy the logos — use a
   deeper, lower-alpha highlight there instead. */
.rr-brand.rr-glow::after {
    background: radial-gradient(220px circle at var(--rr-mx, 50%) var(--rr-my, 50%),
        rgba(192, 0, 0, .14), transparent 62%);
}

/* Section hairlines that draw themselves in as the section arrives. */
.rr-rule {
    display: block;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--rr-line-hi), transparent);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .9s var(--rr-ease-out);
}
.rr-rule.rr-in { transform: scaleX(1); }

/* ------------------------------------------------- 11. reduced motion
   Everything above degrades to a plain, fully-visible dark page. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .rr-motion [data-rr-reveal],
    .rr-motion .rr-hero-inner > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    #rr-glow, #rr-ring, .rr-scroll-dot, .rr-motion .rr-hero::after { display: none !important; }
    .rr-rule { transform: scaleX(1) !important; }

    body *,
    body *::before,
    body *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Coarse pointers get no cursor effects at all — nothing to track. */
@media (hover: none), (pointer: coarse) {
    #rr-glow, #rr-ring { display: none !important; }
    .rr-glow::after { display: none; }
}

/* ------------------------------------------------------- 12. small screens */
@media (max-width: 1024px) {
    body ul#menu-master-menu { margin-left: 0; }
}