/*
Theme Name: Multipurpose-Theme
Theme URI: https://revolutionaryplugins.com/multipurpose-theme
Author: Revolutionary Plugins
Author URI: https://revolutionaryplugins.com
Description: A flexible multipurpose WordPress theme for any kind of business site. Built around Revolutionary Blocks with the full Revolutionary theme dashboard, demo importer and licensed updates.
Version: 1.61.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: revdash
Tags: technology, it-company, business, corporate, full-width-template, custom-header, custom-menu, custom-logo, featured-images, threaded-comments, rtl-language-support, translation-ready
*/

/* ==========================================================================
   BASE RESET & ROOT VARIABLES
   ========================================================================== */
:root {
    --dash-primary:       #0a66c2;
    --dash-primary-dark:  #0052a3;
    --dash-primary-light: #3d8fe0;
    --dash-secondary:     #00c8a0;
    --dash-dark:          #0d1b2a;
    --dash-dark-alt:      #162032;
    --dash-light:         #f7f9fc;
    --dash-text:          #1f2937;
    --dash-gray:          #6b7280;
    --dash-gray-light:    #f3f4f6;
    --dash-white:         #ffffff;
    --dash-border:        #e5e7eb;
    --dash-heading-font:  'Inter', 'Segoe UI', sans-serif;
    --dash-body-font:     'Inter', 'Segoe UI', sans-serif;
    --dash-mono-font:     'JetBrains Mono', 'Courier New', monospace;
    --dash-radius:        8px;
    --dash-radius-lg:     16px;
    --dash-shadow:        0 4px 24px rgba(10, 102, 194, 0.10);
    --dash-shadow-lg:     0 8px 48px rgba(10, 102, 194, 0.18);
    --dash-transition:    all 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Without this, iOS Safari can silently scale up text past its designed
   size (its own "boost text when rotated to landscape" / accessibility text
   heuristics), and because that scaling applies per-element rather than
   uniformly, elements with a fixed line-height set in the stylesheet can end
   up with a line-height box taller than the now-bigger glyphs inside it -
   reading as a chunk of blank space sitting above otherwise normal-looking
   text. Chromium (what every automated check in this repo runs on) has no
   such behavior, so this class of bug is invisible to Playwright/Puppeteer
   checks and only shows up on a real iPhone. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { scroll-behavior: smooth; font-size: 16px; }
/* `clip`, not `hidden`/`auto`/`scroll`: any of those forces the UA to also
   treat the opposite axis as a scroll container (CSS Overflow spec), turning
   <html> into an unintended scrolling ancestor that breaks `position:sticky`
   on anything inside it (the header, most commonly). `clip` still stops a
   decorative element (a hero's parallax layer, a glow/scrim, a full-bleed
   background) from opening a horizontal scrollbar, without that side effect.
   Mirrors body's own overflow-x below; some decoration paints past body's
   own box (confirmed on a real site) so both layers are kept. */
html { overflow-x: clip; }

body {
    font-family: var(--dash-body-font);
    color: var(--dash-dark);
    background: var(--dash-white);
    line-height: 1.7;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   SKIP LINK
   First focusable element on every page (header.php). Hidden off-screen
   until it receives keyboard focus, then shown over everything, colored
   from the mode variables so it fits light and dark mode.
   ========================================================================== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 22px;
    background: var(--dash-mode-accent, var(--dash-primary));
    color: var(--dash-mode-accent-text, var(--dash-white));
    font-family: var(--dash-body-font);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--dash-radius) 0;
    overflow: hidden;
}

.skip-link:focus {
    left: 0;
    color: var(--dash-mode-accent-text, var(--dash-white));
    outline: 2px solid var(--dash-mode-accent-text, var(--dash-white));
    outline-offset: -4px;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dash-heading-font);
    font-weight: 700;
    line-height: 1.2;
    color: var(--dash-dark);
}

/* H2 is 650 in the house type scale (WEBSITE-DESIGN-STANDARD S3.3). Headings
   built in Revolutionary Blocks carry their own weight; this covers the ones
   a plugin or a template renders directly (forum titles, account screens,
   slider captions), which were inheriting the 700 above. */
h2 { font-weight: 650; }

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1rem; }
a { color: var(--dash-primary); text-decoration: none; transition: var(--dash-transition); }
a:hover { color: var(--dash-primary-dark); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }
code { font-family: var(--dash-mono-font); background: var(--dash-gray-light); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
blockquote { border-left: 4px solid var(--dash-primary); padding: 1rem 1.5rem; margin: 1.5rem 0; background: var(--dash-gray-light); border-radius: 0 var(--dash-radius) var(--dash-radius) 0; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.25rem; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-wide {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-padding { padding: 5rem 0; }
.section-padding-sm { padding: 3rem 0; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* em padding keeps the button proportionate to its label (revdash_button
       fx overrides this with the CTA size on the front end). */
    padding: 0.65em 1.5em;
    border-radius: var(--dash-btn-radius, var(--dash-radius));
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--dash-transition);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

/* The theme's primary button CONSUMES the suite-wide --rev-btn-* contract (the
   same tokens the dashboard CTA button publishes), so it tracks the dashboard
   CTA button automatically. Shape/size/animation/fill still come from
   revdash_button_fx_css() + the CTA fill emission; these handle the colors so
   the resting + hover fill and text color match the CTA. Old values are kept as
   var() fallbacks for contexts where the contract isn't emitted. (Per the
   mandatory button-token contract, never hardcode a primary button color.) */
.btn-primary {
    background: var(--rev-btn-bg, var(--dash-primary));
    color: var(--rev-btn-color, var(--dash-white));
    border-color: var(--rev-btn-bg, var(--dash-primary));
}
/* Revolutionary Blocks deliberately wraps its own button defaults (including
   font-weight:600) in :where(.rb-button) so a real theme rule can win on
   specificity alone - but when its render also emits the "wp-element-button"
   class (set by the "Use theme button style" widget option), WordPress core's
   own global-styles block carries `:root :where(.wp-element-button,
   .wp-block-button__link){font-weight:inherit;...}`, and that `:root` prefix
   gives it real, non-zero specificity (0,1,0) that beats the plugin's true
   zero-specificity default - the button silently inherits body text weight
   (400) instead of the intended 600. Confirmed live on revolutionaryit.com
   2026-10-17. Two real classes together (0,2,0) beats it regardless of each
   stylesheet's load order. */
.rb-button.wp-element-button, .wp-element-button.btn-primary, .rb-button.btn-primary {
    font-weight: var(--rev-btn-font-weight, 600);
}
/* Hover motion (lift/grow/etc.) is applied by revdash_button_fx_css() from the
   CTA animation set, so buttons move ONLY when an animation is selected, no
   baked-in lift here, which would otherwise lift unconditionally. */
.btn-primary:hover {
    background: var(--rev-btn-bg-hover, var(--dash-btn-hover, var(--dash-primary-dark)));
    border-color: var(--rev-btn-bg-hover, var(--dash-btn-hover, var(--dash-primary-dark)));
    color: var(--rev-btn-color, var(--dash-white));
}

.btn-secondary {
    background: var(--dash-secondary);
    color: var(--dash-dark);
    border-color: var(--dash-secondary);
}
.btn-secondary:hover {
    background: #00a882;
    border-color: #00a882;
    color: var(--dash-white);
}

.btn-outline {
    background: transparent;
    color: var(--dash-primary);
    border-color: var(--dash-primary);
}
.btn-outline:hover {
    background: var(--dash-primary);
    color: var(--dash-white);
}

.btn-outline-white {
    background: transparent;
    color: var(--dash-white);
    border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover {
    background: var(--dash-white);
    color: var(--dash-primary);
    border-color: var(--dash-white);
}

.btn-lg { padding: 0.8em 1.85em; font-size: 1.05rem; }
.btn-sm { padding: 0.5em 1.2em; font-size: 0.85rem; }

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
#dash-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent;
    transition: var(--dash-transition);
}
/* The light/dark switch: the header changes in the same frame as the page
   instead of fading behind it (main.js adds this for two frames). */
#dash-header.hdr-mode-swap,
#dash-header.hdr-mode-swap *,
#dash-header.hdr-mode-swap *::before,
#dash-header.hdr-mode-swap *::after { transition: none !important; }

/* The header is fixed at top:0 in every layout, so it sits under the WP
   admin toolbar for a logged-in visitor unless nudged down. The side/rail
   layouts below override this with their own (identical) values. */
body.admin-bar #dash-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar #dash-header { top: 46px; }
}

/* Header foreground (nav text, hamburger bars, text logo), one variable set
   per state, driven by the dashboard Header-colors settings. Solid by default
   and after scroll; the transparent-state color while floating over the hero. */
#dash-header {
    --dash-hdr-fg: var(--dash-header-fg-solid, var(--dash-dark, #0d1b2a));
    --dash-hdr-fg-hover: var(--dash-header-fg-solid-hover, var(--dash-primary, #0a66c2));
}
#dash-header.header-transparent:not(.scrolled) {
    --dash-hdr-fg: var(--dash-header-fg-trans, #ffffff);
    --dash-hdr-fg-hover: var(--dash-header-fg-trans-hover, #ffffff);
}
/* Menu font follows the dashboard's Header tab setting; inherits otherwise. */
.primary-nav > li > a,
.header-right-nav > li > a { font-family: var(--dash-header-font, inherit); }

#dash-header.scrolled {
    /* Scrolled IS the solid state, so it takes the configured solid background
       and foreground. Both keep the previous dark default, so a site that
       never set them looks exactly as it did; a site that sets a white header
       background gets dark text instead of white-on-white. */
    background: var(--dash-header-bg, rgba(13, 27, 42, 0.97));
    --dash-hdr-fg: var(--dash-header-fg-solid, #ffffff);
    --dash-hdr-fg-hover: var(--dash-header-fg-solid-hover, #ffffff);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

#dash-header.header-light {
    background: var(--dash-header-bg, var(--dash-white));
    border-bottom: 1px solid var(--dash-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* A light header keeps its light background when scrolled (the rule above
   out-ranks .scrolled's dark default by source order), so it must keep the
   dark solid-state text too. Without this, .scrolled's white fallback left
   the menu white-on-white on every inner page once scrolled past 60px, on
   any site that never set the "Solid header" text color. */
#dash-header.header-light.scrolled {
    --dash-hdr-fg: var(--dash-header-fg-solid, var(--dash-dark, #0d1b2a));
    --dash-hdr-fg-hover: var(--dash-header-fg-solid-hover, var(--dash-primary, #0a66c2));
}

/* Every header region centres on one axis: the site name, the menu and the
   CTA. The <nav> around the primary menu is taller than the menu itself, and
   without this the list sits at the wrapper's top edge and the menu rides
   about ten pixels above the other two. */
.header-inner > nav { display: flex; align-items: center; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    padding-top: var(--dash-header-pad-top, var(--dash-header-pad-y, 0px));
    padding-bottom: var(--dash-header-pad-bottom, var(--dash-header-pad-y, 0px));
    gap: 2rem;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    text-decoration: none;
}

.site-logo img {
    /* Use a fixed height (not max-height) so the default and light logo
       variants render at the SAME size regardless of each file's intrinsic
       dimensions, otherwise the smaller file looks smaller (e.g. the light
       logo on the transparent home hero). width:auto keeps the aspect ratio. */
    height: var(--dash-logo-max-height, 48px);
    max-height: none;
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-name {
    font-size: 1.3rem;
    font-weight: 800;
    /* Follows the header state. Was hard-coded white, which is invisible on a
       transparent header floating over a light hero. */
    color: var(--dash-hdr-fg, var(--dash-white));
    letter-spacing: -0.5px;
}

.logo-tagline {
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

#dash-header.header-light .logo-name { color: var(--dash-hdr-fg); }
#dash-header.header-light .logo-tagline { color: var(--dash-gray); }

/* Primary Nav, stretch items to full header height so there's no dead zone
   above/below the links (which would break hover when crossing to the dropdown). */
.primary-nav {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    height: 100%;
    /* The browser's default list margin was only half reset: a 16px bottom
       margin survived, which made the wrapping <nav> 16px taller than the menu
       and left the menu sitting 8px above the site name and the CTA button. */
    margin: 0;
    padding-left: 0;
    padding-top: var(--dash-menu-pad-top, 0px);
}

.primary-nav > li {
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
    /* The content typography rule `li { margin-bottom: 0.25rem }` leaked into
       the header menus: the 4px of reserved space below each item sat inside
       the header row, so every top-level label rendered 2px above the logo
       and CTA centerline (confirmed live on all three house sites at 1920px,
       label mid 44px against a header mid of 46px). Header menus space
       themselves; the content rule has no business here. */
    margin-bottom: 0;
}

.primary-nav > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--dash-menu-pad-x, 0.9rem);
    font-size: var(--dash-header-font-size, 0.92rem);
    font-weight: var(--dash-header-font-weight, 500);
    color: var(--dash-hdr-fg, rgba(255,255,255,0.88));
    border-radius: 6px;
    transition: var(--dash-transition);
    white-space: nowrap;
}

.primary-nav > li > a:hover,
.primary-nav > li.current-menu-item > a,
.primary-nav > li.current-menu-ancestor > a {
    color: var(--dash-hdr-fg-hover, var(--dash-white));
    background: var(--dash-header-link-hover-bg, rgba(127,127,127,0.12));
}

#dash-header.header-light .primary-nav > li > a { color: var(--dash-hdr-fg); }
#dash-header.header-light .primary-nav > li > a:hover { background: var(--dash-header-link-hover-bg, var(--dash-gray-light)); color: var(--dash-hdr-fg-hover); }

/* Dropdown */
.primary-nav > li.menu-item-has-children { position: relative; }

/* Submenu sits IMMEDIATELY below the menu item (which now fills the full header
   height, see .primary-nav > li above). No gap to cross. */
.primary-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    /* A menu item near the right edge of a wide header (or any width on a
       narrow/zoomed viewport) can otherwise open a submenu wider than what's
       left of the viewport, pushing it off-screen with no way to reach the
       cut-off items. */
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: var(--dash-white);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    box-shadow: var(--dash-shadow-lg);
    padding: 0.5rem;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index: 9999;
}

.primary-nav > li:hover > .sub-menu,
.primary-nav > li:focus-within:not(.nav-parent-static) > .sub-menu,
.primary-nav > li.nav-parent-static.nav-dd-open > .sub-menu,
.primary-nav .sub-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Escape closes the dropdown the pointer is still resting on, or the one the
   focus came out of. main.js returns focus to the parent link or button. */
.primary-nav > li.nav-dd-closed > .sub-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.primary-nav .sub-menu li :is(a, .nav-label-static) {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--dash-dark);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px;
    transition: var(--dash-transition);
}

.primary-nav .sub-menu li a:hover {
    background: var(--dash-header-link-hover-bg, var(--dash-gray-light));
    color: var(--dash-primary);
    padding-left: 1.25rem;
}

/* Category labels: a parent item that only heads the items under it (its URL is
   empty or just "#") is printed as plain text by the walker, never as a link
   that goes nowhere. It copies the look of the link it stands in for. */
.nav-label-static { cursor: default; }
.primary-nav > li > .nav-label-static {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--dash-menu-pad-x, 0.9rem);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--dash-hdr-fg, rgba(255,255,255,0.88));
    white-space: nowrap;
}
#dash-header.header-light .primary-nav > li > .nav-label-static { color: var(--dash-hdr-fg); }

/* A top-level static heading needs an explicit keyboard-operable disclosure.
   Its label stays plain text; only this button opens the submenu. */
.primary-nav > li > .nav-dd-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 2rem;
    margin: 0 0.35rem 0 -0.6rem;
    padding: 0 0.35rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dash-hdr-fg, rgba(255,255,255,0.88));
    cursor: pointer;
}
.primary-nav > li > .nav-dd-toggle:hover,
.primary-nav > li > .nav-dd-toggle:focus-visible {
    color: var(--dash-hdr-fg-hover, var(--dash-white));
    background: var(--dash-header-link-hover-bg, rgba(127,127,127,0.12));
}
#dash-header.header-light .primary-nav > li > .nav-dd-toggle { color: var(--dash-hdr-fg); }
#dash-header.header-light .primary-nav > li > .nav-dd-toggle:hover,
#dash-header.header-light .primary-nav > li > .nav-dd-toggle:focus-visible { color: var(--dash-hdr-fg-hover); }
.nav-dd-chevron {
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    transition: transform .18s ease;
}
.nav-dd-toggle[aria-expanded="true"] .nav-dd-chevron { transform: translateY(0.1rem) rotate(225deg); }
.nav-dd-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-dd-chevron { transition: none; } }

/* Header, Right side nav */
#header-right-nav { flex-shrink: 0; }
.header-right-nav {
    display: flex; align-items: center; gap: 0.1rem;
    list-style: none; margin: 0; padding: 0;
}
.header-right-nav > li { list-style: none; position: relative; margin-bottom: 0; }
.header-right-nav > li > a {
    display: block;
    padding: 0.45rem 0.75rem;
    font-size: var(--dash-header-font-size, 0.85rem);
    font-weight: var(--dash-header-font-weight, 500);
    color: var(--dash-hdr-fg, rgba(255,255,255,0.85));
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}
.header-right-nav > li > a:hover,
.header-right-nav > li.current-menu-item > a {
    color: var(--dash-white);
    background: var(--dash-header-link-hover-bg, rgba(255,255,255,0.08));
}
#dash-header.header-light .header-right-nav > li > a { color: var(--dash-hdr-fg); }
#dash-header.header-light .header-right-nav > li > a:hover,
#dash-header.header-light .header-right-nav > li.current-menu-item > a {
    color: var(--dash-primary); background: var(--dash-header-link-hover-bg, var(--dash-gray-light));
}

/* Mobile right-nav (within mobile-nav drawer) */
.mobile-right-nav {
    list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0;
    border-top: 1px solid var(--dash-border);
}
.mobile-right-nav li { padding: 0.5rem 0; }
.mobile-right-nav a {
    color: var(--dash-muted); font-size: 0.9rem; text-decoration: none; font-weight: 500;
}
.mobile-right-nav a:hover { color: var(--dash-primary); }

@media (max-width: 1024px) {
    #header-right-nav { display: none; }
}

/* Header, logo image variants */
.site-logo-img { display: block; height: var(--dash-logo-max-height, 48px); max-height: none; width: auto; }
/* Footer logo gets its OWN size control. The footer img sits inside an
   <a class="site-logo">, so the generic `.site-logo img` rule above (specificity
   0,1,1) would otherwise out-rank a plain `.site-footer-logo` (0,1,0) and force
   the footer logo to the HEADER height, making the footer size control do
   nothing. Scoping under .site-logo (0,2,0) wins, so the footer variable
   actually drives the size. */
.site-logo .site-footer-logo {
    height: var(--dash-footer-logo-max-height, var(--dash-logo-max-height, 48px));
    max-height: none;
    width: auto;
}
.site-logo-light { display: none; }
/* Swap to the light logo on the transparent hero ONLY when the dashboard's
   "Logo on transparent header" is set to Light (header.php adds
   .header-trans-logo-light). Otherwise the default (dark) logo stays, same
   image, same size as every other page. */
#dash-header.header-transparent.header-trans-logo-light:not(.scrolled) .site-logo-default { display: none; }
#dash-header.header-transparent.header-trans-logo-light:not(.scrolled) .site-logo-light   { display: block; }

/* While the header is transparent (over the hero), the logo can use its OWN
   height, independent of the standard/scrolled header. Lets a light-logo file
   whose artwork sits smaller in its canvas be sized up to visually match the
   default logo. Falls back to the normal logo height when unset. Higher
   specificity than `.site-logo img`, so it wins only in the transparent state. */
#dash-header.header-transparent:not(.scrolled) .site-logo-img {
    height: var(--dash-trans-logo-max-height, var(--dash-logo-max-height, 48px));
}

/* Announcement banner, thin bar above the header (Header tab → Announcement
   banner). Background / text color / font are set inline from the dashboard;
   these are the fallbacks used when those fields are left blank. */
.dash-banner {
    position: relative;
    z-index: 10001; /* above #dash-header (9999) so it's never hidden behind it */
    background: var(--dash-primary, #0a66c2);
    color: #fff;
    text-align: center;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
.dash-banner-text { display: inline-block; }
@media (max-width: 600px) { .dash-banner { font-size: 13px; padding: 8px 14px; } }

/* Custom (Revolutionary Blocks) banner, the RB document brings its own
   sections, backgrounds and spacing, so strip the text-bar cosmetics and let
   the document paint the bar edge-to-edge. Keeps .dash-banner's z-index so it
   still sits above the sticky header. */
.dash-banner--custom {
    background: none;
    color: inherit;
    text-align: initial;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
}

/* Header, TRANSPARENT mode */
#dash-header.header-transparent {
    background: transparent;
    box-shadow: none;
    border-bottom: 0;
}
#dash-header.header-transparent .primary-nav > li > a,
#dash-header.header-transparent .header-right-nav > li > a {
    color: var(--dash-hdr-fg);
}
#dash-header.header-transparent .primary-nav > li > a:hover,
#dash-header.header-transparent .header-right-nav > li > a:hover { color: var(--dash-hdr-fg-hover); background: var(--dash-header-link-hover-bg, rgba(255,255,255,0.08)); }

/* When user scrolls past hero, transparent header becomes solid */
#dash-header.header-transparent.scrolled {
    background: var(--dash-header-bg, var(--dash-white));
    box-shadow: 0 4px 18px rgba(13,27,42,.07);
    border-bottom: 1px solid var(--dash-border);
}
#dash-header.header-transparent.scrolled .primary-nav > li > a,
#dash-header.header-transparent.scrolled .header-right-nav > li > a {
    color: var(--dash-hdr-fg);
}
#dash-header.header-transparent.scrolled .primary-nav > li > a:hover,
#dash-header.header-transparent.scrolled .header-right-nav > li > a:hover {
    color: var(--dash-hdr-fg-hover); background: var(--dash-header-link-hover-bg, var(--dash-gray-light));
}

/* Header, STICKY: keep its normal-flow space so the first content line
   cannot be covered by the header. clip on html/body avoids a scrolling
   ancestor without taking the header out of document flow. Transparent
   home overlays retain the explicit fixed-position rule below. */
#dash-header.header-sticky { position: sticky; top: 0; z-index: 9999; }

/* Home page WITH A TRANSPARENT OVERLAY HEADER: the Revolutionary Slider injects
   its hero at the very top of the body (via wp_body_open, before the header), so
   the header is made FIXED to float OVER the slider instead of sitting as a
   sticky bar below it. z-index (9999) already beats the slider (≤20).

   SCOPED TO .header-transparent, WHICH IT WAS NOT. The rule used to apply to
   every home page, including one built out of Blocks sections with no slider
   anywhere. There the fixed header simply covered the top of the page: the hero
   starts at y=0 and its 96px of top padding has to pay for an 81px header, so
   the first line of content sat 15px under the bar while every other page on
   the site had a comfortable 96px. It read as a cramped, broken home page next
   to perfectly spaced inner pages, which is exactly what it was.

   The theme already has a setting for this intent, "transparent header on the
   home page", and header.php already emits .header-transparent when it is on.
   Honouring it means a home page that has not asked for an overlay behaves like
   every other page: sticky header, content below it. */
body.home #dash-header.header-transparent { position: fixed; top: 0; left: 0; right: 0; }

/* Header, CUSTOM (Revolutionary Blocks): a solid sticky bar pinned to the top
   with the page content (incl. the slider) below it, never the transparent
   hero overlay. Dark default background so light RB logos/menus stay visible
   (override via the Header background fill). */
#dash-header.header-layout-custom {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--dash-header-bg, var(--dash-dark, #0d1b2a));
}
#dash-header.header-layout-custom .dash-custom-header { width: 100%; }
#dash-header.header-layout-custom .rb-document { width: 100%; }

/* Header, OVERLAY mode (hamburger menu at all sizes) */
#dash-header.header-overlay-mode #primary-nav,
#dash-header.header-overlay-mode .header-widgets,
#dash-header.header-overlay-mode #header-right-nav { display: none !important; }

/* Set by the fit check in main.js when the full row genuinely does not fit the
   available width, at any screen size. A fixed breakpoint cannot know this:
   the width a header needs depends on how many menu items it has and how long
   their labels are. Same treatment as overlay mode, which already exists for
   exactly this shape of problem. */
#dash-header.header-fit-collapse #primary-nav,
#dash-header.header-fit-collapse .header-widgets,
#dash-header.header-fit-collapse #header-right-nav { display: none !important; }
#dash-header.header-fit-collapse .menu-toggle { display: flex !important; }

/* Set by the same fit check when the row does not fit the normal container but
   would fit if the header used the width the screen actually has. The container
   is capped at 1280px for a reading measure, which is right for body text and
   wrong for a header: it meant a 1920px display offered a nav no more room than
   a 1300px one, so a wide desktop collapsed to a hamburger with half the screen
   empty. Only the header widens; the page content keeps its measure.
   --hdr-fit-width (set by the same fit check, in main.js) is the actual width
   the row needs; min() below keeps it as the real target and 1760px/100vw as
   a fallback ceiling only, so `.header-inner`'s justify-content: space-between
   does not get a huge excess of room to stretch gaps into on an ultrawide
   display - confirmed live on revolutionaryrmm.com 2026-10-17, where jumping
   straight to the 1760px ceiling left the logo, nav and CTA stranded far apart. */
#dash-header.header-fit-wide > .container {
    max-width: min(1760px, calc(100vw - 48px), var(--hdr-fit-width, 1760px));
}
/* The pill surface's own 36px of left/right padding (below) comes out of this
   same border-box, so the generic formula above left it 36px short of the
   room every other surface gets - close enough to the edge that an ordinary
   menu with icons could need more than it, and did. */
#dash-header.hdr-surface-pill.header-fit-wide > .container {
    max-width: min(1760px, calc(100vw - 12px), var(--hdr-fit-width, 1760px));
}

/* Header widget slot */
.header-widgets {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.header-widgets .widget { margin: 0; }
.header-widgets .widget-title { display: none; }
.header-widgets .dash-widget-social,
.header-widgets .footer-social { display: flex; gap: 0.5rem; }
.header-widgets .social-link {
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}
@media (max-width: 1024px) {
    .header-widgets { display: none; }
}
#dash-header.header-overlay-mode .menu-toggle { display: flex !important; }
#dash-header.header-overlay-mode.header-transparent .menu-toggle span { background: var(--dash-hdr-fg); }

/* ==========================================================================
   HEADER LAYOUTS (desktop ≥1025px, below that all layouts collapse to the
   mobile hamburger via the responsive block lower in this file)
   ========================================================================== */
@media (min-width: 1025px) {

    /* CENTER, logo left, primary nav absolutely centered over the header,
       right-nav + CTA on the right. */
    #dash-header.header-layout-center .header-inner { position: relative; }
    #dash-header.header-layout-center #primary-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    /* The nav is taken out of flow (absolute) and centers on the header's own
       midpoint - its own width eats equally into the space on both sides, so
       whatever the logo+CTA group needs, the nav assumes it's free. Before
       1.58.14 that assumption held because menu-toggle was display:none and
       added nothing; margin-left:auto alone isn't enough once a page's nav
       labels are long enough that the group was already using all its slack
       (confirmed live: fine on revolutionaryplugins.com's shorter nav, broken
       on revolutionaryit.com's longer one). The real fix is to stop the
       always-visible menu-toggle from taking flex-row space here at all - pin
       it in a reserved corner instead, so the logo+CTA group's available width
       is exactly what it was before 1.58.14, on every page regardless of nav
       length. */
    #dash-header.header-layout-center .header-cta { margin-left: auto; }
    /* The icon is position:absolute unconditionally (below), so it always
       occupies this corner, collapse or not, and the corner must always be
       reserved via padding-right or normal-flow content (the CTA, pushed
       right by margin-left:auto above) sits underneath it. 1.58.18 scoped
       this to :not(.header-fit-collapse), reasoning that collapse mode's
       hidden nav freed enough room to drop the reservation - that traded one
       overlap for another: with the reservation gone in collapse mode, the
       CTA's own right edge lands exactly under the icon (confirmed live,
       2026-10-17, revolutionaryrmm.com at 1440px: CTA box 1048-1348px, icon
       1304-1348px, directly overlapping). The 68px CTA overflow 1.58.18 was
       actually fixing traces to a DIFFERENT bug: a site's own leftover
       custom_css was forcing #primary-nav visible via !important even in
       collapse state, so the CTA was losing room to both the (wrongly still
       showing) nav AND this padding at once. With that stale override
       removed at the data layer, the double-squeeze is gone, so the
       reservation can safely apply unconditionally again. */
    #dash-header.header-layout-center .header-inner { padding-right: calc(36px + 2rem); }
    #dash-header.header-layout-center .menu-toggle {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    /* RIGHT, logo left, then nav + right-nav + CTA pushed to the right edge. */
    #dash-header.header-layout-right #primary-nav { margin-left: auto; }

    /* The main menu came from the Header, Right slot (no center menu): it
       stays on the right in the Center layout too instead of being centered.
       html + .hdr-nav-right outrank the centered rules, incl. the hdr-lx one. */
    html #dash-header.header-layout-center #primary-nav.hdr-nav-right {
        position: static;
        transform: none;
        margin: 0 0 0 auto;
    }

    /* STACKED, logo centered on the first row, primary nav centered on the
       second row, CTA pinned to the right and vertically centered. The
       optional secondary right-nav is hidden here to keep the stack to two
       clean rows. */
    #dash-header.header-layout-stacked .header-inner {
        flex-direction: column;
        height: auto;
        min-height: 80px;
        padding: 0.85rem 0;
        gap: 0.55rem;
        justify-content: center;
        position: relative;
    }
    #dash-header.header-layout-stacked .site-logo { margin: 0 auto; }
    #dash-header.header-layout-stacked #primary-nav { margin: 0 auto; }
    #dash-header.header-layout-stacked .primary-nav { justify-content: center; }
    #dash-header.header-layout-stacked #header-right-nav { display: none; }
    #dash-header.header-layout-stacked .header-cta {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

body.nav-open { overflow: hidden; }

/* Mobile Nav, UPGRADE to fullscreen overlay when triggered */
.mobile-nav {
    /* Override default dropdown, go fullscreen overlay */
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Default: transparent (frosted) so the page shows through.
       Opt into a solid background on the Header tab. */
    background: rgba(13, 27, 42, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 80px 32px 48px;
    z-index: 9998;
    overflow-y: auto;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
    display: block !important;
    visibility: hidden;
}
.mobile-nav.active { transform: translateY(0); opacity: 1; visibility: visible; }
/* Optional solid overlay background (toggle on the Header tab).
   Doubled class = higher specificity so it wins regardless of source order. */
.mobile-nav.mobile-nav--solid {
    background: linear-gradient(135deg, #0d1b2a 0%, #162032 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mobile-nav > ul {
    max-width: 720px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.mobile-nav > ul > li > :is(a, .nav-label-static) {
    display: block;
    padding: 18px 0;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    transition: color .15s ease, padding-left .25s ease;
}
.mobile-nav > ul > li > a:hover { color: var(--dash-secondary); padding-left: 12px; }
/* Menu icons inside the drawer: the .nav-icon spacing rule is scoped to
   .primary-nav, so in the drawer the icon sat flush against its label with
   no gap (confirmed live on all three house sites at 390px). Same fixed
   width and gap as the desktop nav so the labels line up down the list. */
.mobile-nav .nav-icon { display: inline-block; width: 1.25em; text-align: center; margin-right: 0.5em; }
.mobile-nav .sub-menu {
    list-style: none;
    padding: 8px 0 12px 16px;
    margin: 0;
}
.mobile-nav .sub-menu li :is(a, .nav-label-static) {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    padding: 8px 0;
    display: block;
    text-decoration: none;
}
.mobile-nav .sub-menu li a:hover { color: var(--dash-primary-light); }

/* Mobile submenu accordion.
   Every parent item is one row: its own link (which still goes to its page) and
   a toggle button beside it. The children are printed hidden by the walker, so
   the menu opens as a short list of top-level items instead of every level at
   once. main.js opens and closes them and keeps aria-expanded in step. */
#mobile-nav li.mnav-parent {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
#mobile-nav li.mnav-parent > :is(a, .nav-label-static) {
    flex: 1 1 auto;
    min-width: 0;
}
#mobile-nav li.mnav-parent > .mnav-sub { flex: 1 0 100%; }
#mobile-nav .mnav-sub-toggle {
    /* 44 by 44 is the smallest tap target that passes the site's gate at 390px
       wide. It sits beside the link, never over it, so pressing the item's own
       label still follows the link. */
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--mnav-rule, rgba(255,255,255,0.08));
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
#mobile-nav .mnav-sub-toggle:focus-visible {
    outline: 2px solid var(--dash-secondary, #fde247);
    outline-offset: -2px;
}
#mobile-nav .mnav-sub-chevron {
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
}
#mobile-nav li.mnav-parent.is-open > .mnav-sub-toggle .mnav-sub-chevron {
    transform: translateY(3px) rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
    #mobile-nav .mnav-sub-chevron { transition: none; }
}
.mobile-right-nav {
    list-style: none;
    margin: 32px auto 0;
    padding: 24px 0 0;
    max-width: 720px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.mobile-right-nav li a {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
}
.mobile-right-nav li a:hover { color: #fff; }

/* Hamburger spans go light on overlay-open or transparent state */
body.nav-open .menu-toggle span { background: #fff; }

/* Header CTA */
.header-cta { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
#dash-header.header-overlay-mode .header-cta { display: none; }
@media (min-width: 1025px) {
    #dash-header.header-overlay-mode .header-cta { display: flex; }
}

/* Hamburger: always visible alongside the full nav, not only in collapse/overlay
   modes (owner direction 2026-10-17: every header style gets the three-line icon). */
.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    background: none;
    border: none;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dash-white);
    border-radius: 2px;
    transition: var(--dash-transition);
}

#dash-header.header-light .menu-toggle span { background: var(--dash-hdr-fg); }

.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    /* Transparent (frosted) by default, matches the overlay rule above.
       Use the Header tab "Solid overlay background" toggle for a solid fill. */
    background: rgba(13, 27, 42, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 1.5rem;
    z-index: 9998;
    border-top: 1px solid rgba(255,255,255,0.1);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.mobile-nav.active { display: block; }

.mobile-nav ul { list-style: none; padding: 0; }
.mobile-nav ul li :is(a, .nav-label-static) {
    display: block;
    padding: 0.8rem 0;
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav ul li a:hover { color: var(--dash-secondary); }
.mobile-nav .sub-menu { padding-left: 1rem; }
.mobile-nav .sub-menu li :is(a, .nav-label-static) { font-size: 0.9rem; color: rgba(255,255,255,0.7); }

/* ==========================================================================
   HERO
   ========================================================================== */
.dash-hero-fallback {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dash-dark) 0%, var(--dash-dark-alt) 50%, #0a2540 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.dash-hero-fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 70% 50%, rgba(10, 102, 194, 0.25) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0, 200, 160, 0.15) 0%, transparent 60%);
}

.dash-hero-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.hero-content-wrap {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(10, 102, 194, 0.2);
    border: 1px solid rgba(10, 102, 194, 0.4);
    color: var(--dash-secondary);
    padding: 0.35rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--dash-secondary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    color: var(--dash-white);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.hero-title .highlight {
    background: linear-gradient(135deg, var(--dash-primary-light), var(--dash-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2.5rem;
    line-height: 1.8;
    max-width: 560px;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

.hero-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.hero-stat-item { text-align: left; }
.hero-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dash-white);
    line-height: 1;
    display: block;
}
.hero-stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.25rem;
    display: block;
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section-header { margin-bottom: 3.5rem; }
.section-header.center { text-align: center; }

.section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--dash-primary);
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1.5rem;
}

.section-tag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 2px;
    background: var(--dash-primary);
}

.section-header.center .section-tag { padding-left: 0; }
.section-header.center .section-tag::before { display: none; }

.section-title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    color: var(--dash-dark);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.section-title .accent { color: var(--dash-primary); }

.section-subtitle {
    font-size: 1.05rem;
    color: var(--dash-gray);
    max-width: 580px;
    line-height: 1.8;
}

.section-header.center .section-subtitle { margin: 0 auto; }

/* ==========================================================================
   SERVICE CARDS
   ========================================================================== */
.services-section { background: var(--dash-white); }

.service-card {
    background: var(--dash-white);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 2rem;
    transition: var(--dash-transition);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dash-primary), var(--dash-secondary));
    transform: scaleX(0);
    transition: var(--dash-transition);
}

.service-card:hover {
    border-color: transparent;
    box-shadow: var(--dash-shadow-lg);
    transform: translateY(-6px);
}

.service-card:hover::before { transform: scaleX(1); }

.service-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(10, 102, 194, 0.1), rgba(0, 200, 160, 0.1));
    border-radius: var(--dash-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    color: var(--dash-primary);
    transition: var(--dash-transition);
}

.service-card:hover .service-icon {
    background: var(--dash-primary);
    color: var(--dash-white);
}

.service-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--dash-dark);
}

.service-desc {
    font-size: 0.92rem;
    color: var(--dash-gray);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.service-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dash-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--dash-transition);
}

.service-link::after {
    content: '→';
    transition: var(--dash-transition);
}

.service-link:hover { color: var(--dash-primary-dark); }
.service-link:hover::after { transform: translateX(4px); }

/* ==========================================================================
   WHY CHOOSE US / FEATURES
   ========================================================================== */
.features-section {
    background: linear-gradient(135deg, var(--dash-dark) 0%, var(--dash-dark-alt) 100%);
    color: var(--dash-white);
    position: relative;
    overflow: hidden;
}

.features-section::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(10, 102, 194, 0.15), transparent 70%);
    pointer-events: none;
}

.features-section .section-title { color: var(--dash-white); }
.features-section .section-subtitle { color: rgba(255,255,255,0.65); }

.feature-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem;
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
}

.feature-item:hover { background: rgba(255,255,255,0.05); }

.feature-icon-wrap {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    border-radius: var(--dash-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--dash-white);
    flex-shrink: 0;
}

.feature-content h4 { color: var(--dash-white); margin-bottom: 0.5rem; font-size: 1.05rem; }
.feature-content p { color: rgba(255,255,255,0.6); font-size: 0.9rem; line-height: 1.65; margin: 0; }

/* ==========================================================================
   PROCESS / HOW IT WORKS
   ========================================================================== */
.process-section { background: var(--dash-gray-light); }

.process-steps { display: flex; flex-direction: column; gap: 0; }

.process-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem 0;
    border-bottom: 1px solid var(--dash-border);
    position: relative;
}

.process-step:last-child { border-bottom: none; }

.step-number {
    width: 56px;
    height: 56px;
    background: var(--dash-primary);
    color: var(--dash-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.process-step:not(:last-child) .step-number::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 2rem + 1px);
    background: linear-gradient(to bottom, var(--dash-primary), var(--dash-border));
    z-index: 0;
}

.step-content h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.step-content p { font-size: 0.92rem; color: var(--dash-gray); margin: 0; line-height: 1.7; }

/* ==========================================================================
   STATS / COUNTER STRIP
   ========================================================================== */
.stats-strip {
    background: linear-gradient(135deg, var(--dash-primary) 0%, var(--dash-primary-dark) 100%);
    padding: 3.5rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

.stat-item {}

.stat-number {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--dash-white);
    line-height: 1;
    display: block;
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
    display: block;
}

.stat-divider {
    width: 32px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

/* ==========================================================================
   TECHNOLOGY STACK
   ========================================================================== */
.tech-stack-section { background: var(--dash-white); }

.tech-logos-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    align-items: center;
}

@media (max-width: 1024px) { .tech-logos-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .tech-logos-grid { grid-template-columns: repeat(3, 1fr); } }

.tech-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
    text-align: center;
}

.tech-logo-item:hover {
    border-color: var(--dash-primary);
    box-shadow: var(--dash-shadow);
    transform: translateY(-3px);
}

.tech-logo-item .tech-icon {
    font-size: 2rem;
    color: var(--dash-gray);
    transition: var(--dash-transition);
}
.tech-logo-item:hover .tech-icon { color: var(--dash-primary); }

.tech-logo-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dash-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-section { background: var(--dash-gray-light); }

.testimonial-card {
    background: var(--dash-white);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 2rem;
    transition: var(--dash-transition);
}

.testimonial-card:hover {
    box-shadow: var(--dash-shadow-lg);
    transform: translateY(-4px);
}

.testimonial-stars {
    color: #f59e0b;
    font-size: 1rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.testimonial-text {
    font-size: 0.95rem;
    color: var(--dash-dark);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--dash-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-white);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.author-info {}
.author-name { font-weight: 700; font-size: 0.92rem; color: var(--dash-dark); }
.author-role { font-size: 0.8rem; color: var(--dash-gray); }

/* ==========================================================================
   BLOG / INSIGHTS
   ========================================================================== */
.blog-card {
    background: var(--dash-white);
    border-radius: var(--dash-radius-lg);
    overflow: hidden;
    border: 1px solid var(--dash-border);
    transition: var(--dash-transition);
}

.blog-card:hover { box-shadow: var(--dash-shadow-lg); transform: translateY(-4px); }

.blog-thumb {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--dash-gray-light);
}

.blog-body { padding: 1.5rem; }

.blog-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.blog-cat {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dash-primary);
    background: rgba(10, 102, 194, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.blog-date { font-size: 0.8rem; color: var(--dash-gray); }

.blog-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dash-dark);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    transition: var(--dash-transition);
}

.blog-card:hover .blog-title { color: var(--dash-primary); }

.blog-excerpt { font-size: 0.88rem; color: var(--dash-gray); line-height: 1.65; margin-bottom: 1.25rem; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
    background: linear-gradient(135deg, var(--dash-dark) 0%, #0a2540 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(10, 102, 194, 0.2), transparent 70%);
}

.cta-band-inner { position: relative; z-index: 1; }
.cta-band h2 { color: var(--dash-white); font-size: clamp(1.75rem, 3vw, 2.75rem); margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,0.65); font-size: 1.05rem; margin-bottom: 2rem; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-band .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-section { background: var(--dash-white); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.contact-info p { color: var(--dash-gray); margin-bottom: 2rem; }

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.contact-detail-icon {
    width: 40px;
    height: 40px;
    background: rgba(10, 102, 194, 0.1);
    border-radius: var(--dash-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dash-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-detail-text { font-size: 0.9rem; }
.contact-detail-text strong { display: block; color: var(--dash-dark); font-weight: 600; margin-bottom: 0.2rem; }
.contact-detail-text span { color: var(--dash-gray); }

.contact-form {}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--dash-dark); margin-bottom: 0.4rem; }

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--dash-border);
    border-radius: var(--dash-radius);
    font-family: var(--dash-body-font);
    font-size: 0.92rem;
    color: var(--dash-dark);
    background: var(--dash-white);
    transition: var(--dash-transition);
    outline: none;
    appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--dash-primary);
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.12);
}

.form-group textarea { resize: vertical; min-height: 130px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
#dash-footer {
    background: var(--dash-footer-bg, var(--dash-dark));
    color: rgba(255,255,255,0.7);
    padding-top: 4rem;
}

.footer-grid {
    display: grid;
    /* Brand column (2fr) + one 1fr per configured footer column.
       --dash-footer-cols is set inline on the element from the theme option. */
    grid-template-columns: 2fr repeat(var(--dash-footer-cols, 3), minmax(0, 1fr));
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand {}
/* Footer logo link, width:fit-content + auto margins let the dashboard
   alignment selector (left/center/right) move just the logo. Defaults left. */
.footer-brand .site-footer-logo-link {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1rem;
    margin-left: var(--dash-footer-logo-ml, 0);
    margin-right: var(--dash-footer-logo-mr, auto);
}
.footer-brand .logo-name { color: var(--dash-white); font-size: 1.5rem; }
.footer-brand .logo-tagline { color: rgba(255,255,255,0.4); }
.footer-brand p { font-size: 0.9rem; line-height: 1.8; margin-top: 1rem; margin-bottom: 1.5rem; }

.footer-social { display: flex; gap: 0.75rem; }
.social-link {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    transition: var(--dash-transition);
}
.social-link:hover { background: var(--dash-primary); border-color: var(--dash-primary); color: var(--dash-white); }

.footer-col h4,
#dash-footer .footer-col-title {
    color: var(--dash-white);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 0.65rem; }
.footer-col ul li a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
    transition: var(--dash-transition);
}
.footer-col ul li a:hover { color: var(--dash-white); padding-left: 4px; }

/* Contact Info widget (Revdash_Contact_Widget), tuned for the dark footer,
   degrades fine in lighter widget areas (header/sidebar). */
.dash-contact-widget {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dash-ci-row {
    display: flex;
    /* Center the icon against the whole text block so it sits in the middle of
       multi-line items (address, hours) instead of pinned to the top line. */
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.6);
}
.dash-ci-row:last-child { margin-bottom: 0; }
.dash-ci-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dash-radius);
    background: rgba(255,255,255,0.06);
    color: var(--dash-primary-light);
    font-size: 0.9rem;
}
.dash-ci-text a {
    color: rgba(255,255,255,0.6);
    transition: var(--dash-transition);
}
.dash-ci-text a:hover { color: var(--dash-white); }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-bottom-text { font-size: 0.83rem; }
/* Links embedded in footer prose need a non-color cue in every palette. */
.footer-bottom-text a { text-decoration: underline; text-underline-offset: 0.15em; }
.footer-credit {
    font-size: 0.78rem;
    margin: 0;
    flex-basis: 100%;
    order: 3;
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,0.4);
}
.footer-credit a {
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-credit a:hover { color: var(--dash-white); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { font-size: 0.83rem; color: rgba(255,255,255,0.5); transition: color 0.15s ease; }
.footer-bottom-links a:hover { color: var(--dash-white); }

/* Contact details in the footer's brand column. Plain list, no bullets, sized
   with the tagline above it so the column reads as one block. */
.footer-contact {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .45rem;
    font-size: .95rem;
    line-height: 1.5;
}
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
#dash-footer.footer-layout-centered .footer-contact { justify-items: center; }

/* ── Footer layout templates ─────────────────────────────────────────────── */
/* Centered, collapse the grid into one centered column; center the bottom bar. */
#dash-footer.footer-layout-centered .footer-grid {
    display: block;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
#dash-footer.footer-layout-centered .footer-col { margin-top: 2rem; }
#dash-footer.footer-layout-centered .footer-social { justify-content: center; }
#dash-footer.footer-layout-centered .footer-bottom { justify-content: center; text-align: center; }
/* Minimal, footer.php omits the grid, leaving only the bottom bar; center it. */
#dash-footer.footer-layout-minimal .footer-bottom { justify-content: center; text-align: center; }
/* Custom, Revolutionary Blocks renders the whole footer; let it own spacing. */
#dash-footer.footer-layout-custom { padding-top: 0; }
#dash-footer.footer-layout-custom .dash-custom-footer { width: 100%; }

/* ==========================================================================
   WORDPRESS CORE / GUTENBERG
   ========================================================================== */
.wp-block-image img { border-radius: var(--dash-radius); }
.wp-block-quote { border-left: 4px solid var(--dash-primary); }
.wp-block-button__link { border-radius: var(--rev-btn-radius, var(--dash-btn-radius, var(--dash-radius))) !important; }

.entry-content img { border-radius: var(--dash-radius); }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.entry-content table th, .entry-content table td { padding: 0.75rem 1rem; border: 1px solid var(--dash-border); text-align: left; }
.entry-content table th { background: var(--dash-gray-light); font-weight: 700; }

.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1.5rem; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.dash-pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 3rem;
}

.dash-pagination a, .dash-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dash-dark);
    transition: var(--dash-transition);
}

.dash-pagination a:hover, .dash-pagination .current {
    background: var(--dash-primary);
    border-color: var(--dash-primary);
    color: var(--dash-white);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ==========================================================================
   FRONT PAGE LAYOUT HELPERS
   ========================================================================== */
.why-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 900px) {
    .why-us-grid,
    .process-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.blog-thumb-placeholder {
    width: 100%;
    height: 220px;
    background: var(--dash-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-thumb-placeholder i {
    font-size: 2.5rem;
    color: var(--dash-border);
}

/* ==========================================================================
   SCROLL-TO-TOP
   ========================================================================== */
#scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    /* Mirror .btn-primary so the user's CTA-button color treatment carries
       through (the wp_head emission overrides background + color when custom
       CTA colors are saved; this is the matching default). */
    background: linear-gradient(135deg, var(--dash-primary) 0%, var(--dash-primary-dark) 100%);
    color: var(--dash-white);
    border: none;
    border-radius: var(--dash-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--dash-shadow);
    opacity: 0;
    visibility: hidden;
    transition: var(--dash-transition);
    z-index: 8888;
}

#scroll-top.visible { opacity: 1; visibility: visible; }
#scroll-top:hover {
    /* Same hover cascade as .btn-primary, dedicated --dash-btn-hover wins
       when set; otherwise the brand gradient flips for a subtle direction
       change instead of a flat darken. */
    background: var(--dash-btn-hover, linear-gradient(135deg, var(--dash-primary-dark) 0%, var(--dash-primary) 100%));
    transform: translateY(-3px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .primary-nav, .header-cta { display: none; }
    /* Hidden desktop lists must not leave empty flex items/gaps. Let a
       wide logo shrink before pushing the two mobile controls off-screen. */
    .header-inner > nav { display: none; }
    .header-inner { gap: 0.5rem; }
    .header-inner .site-logo { min-width: 0; flex-shrink: 1; }
    .header-inner .site-logo img { max-width: 100%; object-fit: contain; }
    .header-inner .logo-text { min-width: 0; overflow-wrap: anywhere; }
    .header-inner .hdr-color-mode-compact, .header-inner .menu-toggle { flex-shrink: 0; }
    .menu-toggle { display: flex; }
    .section-padding { padding: 3.5rem 0; }
}

@media (max-width: 768px) {
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .hero-stats { gap: 1.5rem; }
    .process-step { grid-template-columns: 60px 1fr; }
}

@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    .btn-lg { padding: 0.85rem 1.5rem; font-size: 0.95rem; }
    .header-inner { height: 68px; }
}

/* ==========================================================================
   GOD-TIER ENHANCEMENTS, Premium Home Page Polish
   Layered on top of base styles; references existing CSS vars only.
   ========================================================================== */

/* --- Global polish: selection + scrollbar --- */
::selection { background: var(--dash-primary); color: var(--dash-white); }
::-moz-selection { background: var(--dash-primary); color: var(--dash-white); }

html { scroll-padding-top: 96px; }

@supports (scrollbar-color: auto) {
    html { scrollbar-color: var(--dash-primary) var(--dash-gray-light); scrollbar-width: thin; }
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--dash-gray-light); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dash-primary), var(--dash-secondary));
    border-radius: 8px;
    border: 3px solid var(--dash-gray-light);
}
::-webkit-scrollbar-thumb:hover { background: var(--dash-primary-dark); }

/* --- Reveal-on-load stagger (CSS-only) --- */
@media (prefers-reduced-motion: no-preference) {
    .grid-3 > .service-card,
    .grid-3 > .testimonial-card,
    .grid-3 > .blog-card,
    .tech-logos-grid > .tech-logo-item,
    .stats-grid > .stat-item,
    .process-steps > .process-step,
    .feature-item {
        animation: dash-rise .9s cubic-bezier(.16, 1, .3, 1) backwards;
    }
    .grid-3 > *:nth-child(1),
    .tech-logos-grid > *:nth-child(1),
    .stats-grid > *:nth-child(1),
    .process-steps > *:nth-child(1) { animation-delay: .05s; }
    .grid-3 > *:nth-child(2),
    .tech-logos-grid > *:nth-child(2),
    .stats-grid > *:nth-child(2),
    .process-steps > *:nth-child(2) { animation-delay: .15s; }
    .grid-3 > *:nth-child(3),
    .tech-logos-grid > *:nth-child(3),
    .stats-grid > *:nth-child(3),
    .process-steps > *:nth-child(3) { animation-delay: .25s; }
    .grid-3 > *:nth-child(4),
    .tech-logos-grid > *:nth-child(4),
    .stats-grid > *:nth-child(4),
    .process-steps > *:nth-child(4) { animation-delay: .35s; }
    .grid-3 > *:nth-child(5),
    .tech-logos-grid > *:nth-child(5) { animation-delay: .45s; }
    .grid-3 > *:nth-child(6),
    .tech-logos-grid > *:nth-child(6) { animation-delay: .55s; }
    .tech-logos-grid > *:nth-child(n+7) { animation-delay: .65s; }
}

@keyframes dash-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   HERO, Aurora mesh + floating glow orbs + animated gradient title
   ========================================================================== */
.dash-hero-fallback {
    background:
        radial-gradient(ellipse 70% 60% at 18% 25%, rgba(10, 102, 194, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 60% 55% at 82% 75%, rgba(0, 200, 160, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 50% 110%, rgba(61, 143, 224, 0.25) 0%, transparent 60%),
        linear-gradient(135deg, #0a1422 0%, var(--dash-dark) 45%, #0a2540 100%);
}

.dash-hero-fallback::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(61, 143, 224, 0.55), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(0, 200, 160, 0.40), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(10, 102, 194, 0.20), transparent 50%);
    filter: blur(60px);
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .dash-hero-fallback::before {
        animation: dash-orb-drift 22s ease-in-out infinite alternate;
    }
}

@keyframes dash-orb-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-30px, 40px, 0) scale(1.1); }
    100% { transform: translate3d(25px, -25px, 0) scale(0.95); }
}

.dash-hero-fallback::after {
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 85%);
    opacity: 0.7;
}

.hero-content-wrap { position: relative; }

.hero-content-wrap::after {
    content: '';
    position: absolute;
    right: -120px;
    top: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(0, 200, 160, 0.35), transparent 65%);
    filter: blur(70px);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-content-wrap::after { animation: dash-pulse-glow 7s ease-in-out infinite; }
}

@keyframes dash-pulse-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}

.hero-badge {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(10, 102, 194, 0.28), rgba(0, 200, 160, 0.15));
    box-shadow: 0 4px 24px -8px rgba(0, 200, 160, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-title {
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}

.hero-title .highlight {
    background: linear-gradient(135deg, #3d8fe0 0%, #00c8a0 45%, #00e6b8 70%, #3d8fe0 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-title .highlight { animation: dash-shimmer 6s linear infinite; }
}

@keyframes dash-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.hero-stat-item {
    position: relative;
    padding-right: 2.5rem;
}
.hero-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 42px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.hero-stat-number {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.65) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero scroll indicator */
.dash-hero-fallback .container::after {
    content: '';
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    pointer-events: none;
}
.dash-hero-fallback .container::before {
    content: '';
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--dash-secondary);
    border-radius: 2px;
    pointer-events: none;
}
.dash-hero-fallback .container { position: relative; }
@media (prefers-reduced-motion: no-preference) {
    .dash-hero-fallback .container::before { animation: dash-scroll-hint 2.2s ease-in-out infinite; }
}
@keyframes dash-scroll-hint {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    70%  { transform: translate(-50%, 12px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 0; }
}
@media (max-width: 768px) {
    .dash-hero-fallback .container::after,
    .dash-hero-fallback .container::before { display: none; }
}

/* ==========================================================================
   SERVICES, Glassmorphic cards with gradient borders
   ========================================================================== */
.services-section {
    background: linear-gradient(180deg, var(--dash-white) 0%, #fafbfd 100%);
    position: relative;
    overflow: hidden;
}

.services-section::before {
    content: '';
    position: absolute;
    top: 5%;
    left: -10%;
    width: 35%;
    height: 60%;
    background: radial-gradient(circle, rgba(10, 102, 194, 0.07), transparent 70%);
    pointer-events: none;
}

.services-section::after {
    content: '';
    position: absolute;
    bottom: 5%;
    right: -10%;
    width: 35%;
    height: 60%;
    background: radial-gradient(circle, rgba(0, 200, 160, 0.06), transparent 70%);
    pointer-events: none;
}

.services-section > .container { position: relative; z-index: 1; }

.service-card {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    box-shadow: 0 4px 20px -8px rgba(13, 27, 42, 0.08);
}

.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--dash-radius-lg);
    padding: 1.5px;
    background: linear-gradient(135deg, transparent 25%, var(--dash-primary) 60%, var(--dash-secondary) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.service-card:hover::after { opacity: 1; }

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px -20px rgba(10, 102, 194, 0.28);
}

.service-icon {
    box-shadow: 0 8px 24px -10px rgba(10, 102, 194, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    color: var(--dash-white);
    box-shadow:
        0 14px 32px -10px rgba(10, 102, 194, 0.55),
        0 0 0 6px rgba(10, 102, 194, 0.08);
    transform: rotate(-6deg) scale(1.06);
}

/* ==========================================================================
   STATS STRIP, Animated grid pattern + light bloom
   ========================================================================== */
.stats-strip {
    position: relative;
    overflow: hidden;
}

.stats-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.1), transparent 35%),
        radial-gradient(circle at 85% 50%, rgba(0, 200, 160, 0.18), transparent 40%);
    pointer-events: none;
}

.stats-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    pointer-events: none;
}

.stats-strip > .container { position: relative; z-index: 1; }

.stat-item {
    padding: 1.25rem 0.5rem;
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
}
.stat-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.stat-number {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    width: 40px;
}

/* ==========================================================================
   FEATURES, Aurora glow + animated icon shine
   ========================================================================== */
.features-section::after {
    content: '';
    position: absolute;
    bottom: -180px;
    left: -150px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(0, 200, 160, 0.18), transparent 70%);
    pointer-events: none;
}

.features-section > .container { position: relative; z-index: 1; }

.feature-icon-wrap {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(10, 102, 194, 0.6);
    transition: var(--dash-transition);
}

.feature-icon-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%);
    transform: translateX(-110%);
    transition: transform 0.9s ease;
}

.feature-item:hover .feature-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 16px 40px -10px rgba(0, 200, 160, 0.55);
}

.feature-item:hover .feature-icon-wrap::before { transform: translateX(110%); }

.feature-item {
    border: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   PROCESS, Polished step numbers + decorative glow
   ========================================================================== */
.process-section {
    position: relative;
    overflow: hidden;
}

.process-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(10, 102, 194, 0.07), transparent 70%);
    pointer-events: none;
}

.process-section > .container { position: relative; z-index: 1; }

.step-number {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-dark));
    box-shadow:
        0 10px 28px -10px rgba(10, 102, 194, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1), box-shadow 0.4s ease;
}

.process-step:hover .step-number {
    transform: scale(1.12) rotate(8deg);
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    box-shadow: 0 16px 36px -10px rgba(0, 200, 160, 0.55);
}

.step-content h3 { transition: color 0.25s ease; }
.process-step:hover .step-content h3 { color: var(--dash-primary); }

/* ==========================================================================
   TECH STACK, Conic-gradient halo + 3D tilt
   ========================================================================== */
.tech-logo-item {
    position: relative;
    background: linear-gradient(180deg, var(--dash-white) 0%, #fafbfd 100%);
    isolation: isolate;
}

.tech-logo-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--dash-radius-lg) + 2px);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--dash-primary) 80deg,
        var(--dash-secondary) 180deg,
        transparent 270deg
    );
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.tech-logo-item:hover::before { opacity: 0.4; }

@media (prefers-reduced-motion: no-preference) {
    .tech-logo-item:hover::before { animation: dash-spin 4s linear infinite; }
}

@keyframes dash-spin { to { transform: rotate(360deg); } }

.tech-logo-item:hover {
    transform: translateY(-6px) scale(1.04);
    border-color: transparent;
    box-shadow: 0 16px 36px -12px rgba(10, 102, 194, 0.3);
}

.tech-logo-item .tech-icon { transition: transform 0.35s ease, color 0.25s ease; }
.tech-logo-item:hover .tech-icon { transform: scale(1.18); color: var(--dash-primary); }

/* ==========================================================================
   TESTIMONIALS, Quote watermark + premium hover
   ========================================================================== */
.testimonials-section {
    position: relative;
    overflow: hidden;
}

.testimonials-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 5%, rgba(10, 102, 194, 0.07), transparent 35%),
        radial-gradient(circle at 5% 95%, rgba(0, 200, 160, 0.07), transparent 35%);
    pointer-events: none;
}

.testimonials-section > .container { position: relative; z-index: 1; }

.testimonial-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    overflow: hidden;
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -28px;
    right: 14px;
    font-size: 7rem;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    color: var(--dash-primary);
    opacity: 0.08;
    font-weight: 900;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.testimonial-card:hover::before {
    opacity: 0.14;
    transform: scale(1.08) rotate(-6deg);
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -18px rgba(10, 102, 194, 0.25);
}

.author-avatar {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    box-shadow: 0 8px 18px -6px rgba(10, 102, 194, 0.45);
    border: 2px solid var(--dash-white);
}

/* ==========================================================================
   BLOG, Image zoom + premium card
   ========================================================================== */
.blog-card { position: relative; }
.blog-card > a { display: block; overflow: hidden; border-radius: var(--dash-radius-lg) var(--dash-radius-lg) 0 0; }
.blog-thumb { transition: transform 0.6s cubic-bezier(.16, 1, .3, 1); }
.blog-card:hover .blog-thumb { transform: scale(1.07); }

.blog-card:hover {
    box-shadow: 0 24px 50px -18px rgba(10, 102, 194, 0.22);
    transform: translateY(-6px);
}

.blog-cat {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-primary-light));
    color: var(--dash-white);
    box-shadow: 0 2px 6px -2px rgba(10, 102, 194, 0.4);
}

/* ==========================================================================
   CTA BAND, Layered glow + mesh + gradient headline
   ========================================================================== */
.cta-band {
    background:
        radial-gradient(ellipse 55% 60% at 25% 30%, rgba(10, 102, 194, 0.45), transparent 60%),
        radial-gradient(ellipse 55% 60% at 75% 75%, rgba(0, 200, 160, 0.30), transparent 60%),
        linear-gradient(135deg, #0a1422 0%, var(--dash-dark) 50%, #0a2540 100%);
}

.cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
    pointer-events: none;
}

.cta-band h2 {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   CONTACT, Floating form card + interactive details
   ========================================================================== */
.contact-section {
    background: linear-gradient(180deg, var(--dash-white) 0%, #fafbfd 100%);
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -10%;
    width: 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(10, 102, 194, 0.06), transparent 70%);
    pointer-events: none;
}

.contact-section > .container { position: relative; z-index: 1; }

.contact-detail {
    padding: 0.85rem 1rem;
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
    margin-bottom: 0.5rem;
}
.contact-detail:hover {
    background: rgba(10, 102, 194, 0.04);
    transform: translateX(6px);
}

.contact-detail-icon {
    background: linear-gradient(135deg, rgba(10, 102, 194, 0.12), rgba(0, 200, 160, 0.10));
    transition: var(--dash-transition);
}

.contact-detail:hover .contact-detail-icon {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    color: var(--dash-white);
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 8px 20px -6px rgba(10, 102, 194, 0.45);
}

.contact-form {
    background: var(--dash-white);
    padding: 2.5rem;
    border-radius: var(--dash-radius-lg);
    box-shadow: 0 24px 60px -24px rgba(10, 102, 194, 0.18);
    border: 1px solid var(--dash-border);
    position: relative;
}

.contact-form::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--dash-radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--dash-primary), transparent 50%, var(--dash-secondary));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.35;
    pointer-events: none;
}

@media (max-width: 540px) {
    .contact-form { padding: 1.5rem; }
}

.form-group input,
.form-group select,
.form-group textarea {
    background: #f9fafc;
    border-color: transparent;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    background: #f4f6fa;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: var(--dash-white);
    border-color: var(--dash-primary);
    box-shadow:
        0 0 0 3px rgba(10, 102, 194, 0.15),
        0 4px 16px -4px rgba(10, 102, 194, 0.18);
}

/* ==========================================================================
   BUTTONS, Premium feel with subtle glow
   ========================================================================== */
.btn-primary {
    /* Shadow/glow consumes the suite --rev-btn-* contract instead of a hardcoded
       blue, so it tracks the brand (and a Revolutionary Blocks button can switch
       it off or recolor it per-button via its Glow control). */
    box-shadow: var(--rev-btn-shadow, none);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.7s ease;
}
.btn-primary:hover::before { transform: translateX(110%); }

/* The license server's checkout button (Subscribe) takes the full theme primary
   CTA: it already reads the --rev-btn-* tokens and the CTA animation set, this
   adds the pieces only .btn-primary carries, the 2px brand border, the tight
   line-height and the hover sheen, so it is the same button as the header CTA. */
:is(.rls-pricing, .rls-account, .rls-success) .rls-button--primary {
    border: 2px solid var(--rev-btn-bg, var(--dash-primary));
    line-height: 1;
}
:is(.rls-pricing, .rls-account, .rls-success) .rls-button--primary:hover {
    border-color: var(--rev-btn-bg-hover, var(--dash-btn-hover, var(--dash-primary-dark)));
}
:is(.rls-pricing, .rls-account, .rls-success) .rls-button--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.7s ease;
    pointer-events: none;
}
:is(.rls-pricing, .rls-account, .rls-success) .rls-button--primary:hover::before { transform: translateX(110%); }

.btn-primary:hover {
    /* A dedicated Button-hover brand color (--dash-btn-hover) wins when set;
       otherwise fall back to the default gradient flip. */
    background: var(--dash-btn-hover, linear-gradient(135deg, var(--dash-primary-dark) 0%, var(--dash-primary) 100%));
    box-shadow: var(--rev-btn-shadow-hover, var(--rev-btn-shadow, none));
}

.btn-outline-white {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   SECTION HEADERS, Tag enhancement
   ========================================================================== */
.section-tag {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-tag::before {
    background: linear-gradient(90deg, var(--dash-primary), var(--dash-secondary));
}

.features-section .section-tag,
.cta-band .section-tag {
    background: linear-gradient(135deg, var(--dash-secondary), var(--dash-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   ACCESSIBILITY, Honor reduced motion preferences
   ========================================================================== */
/* The header nav is excluded: its Menu link style (Header tab) is a small,
   hover-triggered effect the site owner opted into, and this blanket rule
   was flattening every one of them to an instant snap for any visitor whose
   OS has animations turned off (Windows does this by default in many setups),
   which read as "the menu link animations don't work". */
@media (prefers-reduced-motion: reduce) {
    *:not(#dash-header .primary-nav, #dash-header .primary-nav *),
    *:not(#dash-header .primary-nav, #dash-header .primary-nav *)::before,
    *:not(#dash-header .primary-nav, #dash-header .primary-nav *)::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   REVBLOCKS HOME PARITY, Make Revolutionary-Blocks-rendered pages look
   identical to the hardcoded god-tier front-page.php sections.
   Each section is tagged with a `dash-rev-*` css_class by the installer
   helpers in inc/revblocks-installer.php; the rules below hook those.
   ========================================================================== */

/* --- Generic: full-bleed sections, wider inner, modern spacing --- */
.rb-section.dash-rev-services,
.rb-section.dash-rev-features,
.rb-section.dash-rev-process,
.rb-section.dash-rev-tech,
.rb-section.dash-rev-testimonials,
.rb-section.dash-rev-blog,
.rb-section.dash-rev-cta,
.rb-section.dash-rev-contact,
.rb-section.dash-rev-section-header {
    width: 100%;
}

.rb-section.dash-rev-services > .rb-section__inner,
.rb-section.dash-rev-features > .rb-section__inner,
.rb-section.dash-rev-process > .rb-section__inner,
.rb-section.dash-rev-tech > .rb-section__inner,
.rb-section.dash-rev-testimonials > .rb-section__inner,
.rb-section.dash-rev-blog > .rb-section__inner,
.rb-section.dash-rev-cta > .rb-section__inner,
.rb-section.dash-rev-contact > .rb-section__inner,
.rb-section.dash-rev-section-header > .rb-section__inner {
    max-width: 1280px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    gap: 2rem;
}

/* --- Eyebrow / H2 / Lead inside rb section headers --- */
.dash-rev-eyebrow .rb-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 0.5rem;
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dash-rev-h2 .rb-heading {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 0 0 1rem;
}
.dash-rev-lead .rb-text {
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.75;
    margin: 0 auto;
}
.dash-rev-section-header > .rb-section__inner { padding-bottom: 8px; flex-direction: column; align-items: center; }
.dash-rev-section-header .rb-column { text-align: center; width: 100% !important; flex: 1 1 100%; }

/* On-dark variant for features section eyebrow */
.dash-rev-on-dark .dash-rev-eyebrow .rb-heading {
    background: linear-gradient(135deg, var(--dash-secondary), var(--dash-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Services grid (3-up, glassmorphic card with gradient border on hover) --- */
.rb-section.dash-rev-services {
    background:
        linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.dash-rev-services::before {
    content: '';
    position: absolute;
    top: 5%; left: -10%;
    width: 35%; height: 60%;
    background: radial-gradient(circle, rgba(10,102,194,0.08), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-services::after {
    content: '';
    position: absolute;
    bottom: 5%; right: -10%;
    width: 35%; height: 60%;
    background: radial-gradient(circle, rgba(0,200,160,0.06), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-services > .rb-section__inner { position: relative; z-index: 1; }

.rb-section.dash-rev-services .rb-column {
    padding: 10px;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}
.rb-section.dash-rev-services .rb-widget--icon_box {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 2rem;
    transition: var(--dash-transition);
    overflow: hidden;
    box-shadow: 0 4px 20px -8px rgba(13,27,42,0.08);
    margin: 0;
}
.rb-section.dash-rev-services .rb-widget--icon_box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dash-primary), var(--dash-secondary));
    transform: scaleX(0);
    transition: var(--dash-transition);
    transform-origin: left;
}
.rb-section.dash-rev-services .rb-widget--icon_box:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 24px 60px -20px rgba(10,102,194,0.28);
}
.rb-section.dash-rev-services .rb-widget--icon_box:hover::before { transform: scaleX(1); }

.rb-section.dash-rev-services .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, rgba(10,102,194,0.10), rgba(0,200,160,0.10)) !important;
    border-radius: var(--dash-radius);
    width: 56px;
    height: 56px;
    box-shadow: 0 8px 24px -10px rgba(10,102,194,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: var(--dash-transition);
}
.rb-section.dash-rev-services .rb-widget--icon_box:hover .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary)) !important;
    transform: rotate(-6deg) scale(1.06);
    box-shadow: 0 14px 32px -10px rgba(10,102,194,0.55), 0 0 0 6px rgba(10,102,194,0.08);
}
.rb-section.dash-rev-services .rb-widget--icon_box:hover .rb-iconbox__icon--svg svg { fill: #ffffff !important; }
.rb-section.dash-rev-services .rb-iconbox__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dash-dark);
    margin: 1rem 0 0.5rem;
}
.rb-section.dash-rev-services .rb-iconbox__body {
    font-size: 0.92rem;
    color: var(--dash-gray);
    line-height: 1.7;
}

/* --- Stats strip (animated grid + glow over the primary background) --- */
.rb-section.dash-rev-section-header + .rb-section.dash-rev-services,
.rb-section.dash-rev-section-header + .rb-section.dash-rev-tech,
.rb-section.dash-rev-section-header + .rb-section.dash-rev-testimonials,
.rb-section.dash-rev-section-header + .rb-section.dash-rev-blog { padding-top: 0; }

/* Stats strip, the rb_sec_stats output is rendered as a section with a
   primary bg. Add bloom + grid overlay so it matches the hardcoded look. */
.rb-section[class*="rb-id-"] > .rb-section__inner > .rb-column > .rb-widget--counter { position: relative; }

/* Apply the lift + glow only to sections whose bg is primary blue.
   The installer always sets the bg to var(--dash-primary) for stats. */
.rb-document > .rb-section + .rb-section .rb-counter__number,
.rb-document .rb-section .rb-widget--counter .rb-counter__number {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hard rule: when a section has only counter widgets and a blue/dark bg,
   layer on the grid overlay. We add an explicit class via the rb_sec_stats. */
.rb-section.dash-rev-features,
.rb-section.dash-rev-cta {
    position: relative;
    overflow: hidden;
    color: var(--dash-white);
}

/* --- Features (Why us) section: dark with aurora glow + shine on icons --- */
.rb-section.dash-rev-features {
    background:
        radial-gradient(ellipse 60% 60% at 30% 30%, rgba(10,102,194,0.30), transparent 60%),
        radial-gradient(ellipse 60% 60% at 70% 70%, rgba(0,200,160,0.20), transparent 60%),
        linear-gradient(135deg, var(--dash-dark) 0%, var(--dash-dark-alt) 100%) !important;
}
.rb-section.dash-rev-features::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(10,102,194,0.15), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-features::after {
    content: '';
    position: absolute;
    bottom: -180px; left: -150px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(0,200,160,0.18), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-features > .rb-section__inner { position: relative; z-index: 1; }

.rb-section.dash-rev-features .dash-rev-feature-item {
    background: transparent;
    border-radius: var(--dash-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
    transition: var(--dash-transition);
    border: 1px solid transparent;
}
.rb-section.dash-rev-features .dash-rev-feature-item:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.rb-section.dash-rev-features .dash-rev-feature-item .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary)) !important;
    width: 48px;
    height: 48px;
    border-radius: var(--dash-radius);
    box-shadow: 0 10px 30px -10px rgba(10,102,194,0.6);
    overflow: hidden;
    position: relative;
}
.rb-section.dash-rev-features .dash-rev-feature-item:hover .rb-iconbox__icon-wrap {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 16px 40px -10px rgba(0,200,160,0.55);
}
.rb-section.dash-rev-features .dash-rev-feature-item .rb-iconbox__title { color: #ffffff !important; font-size: 1.05rem; margin: 0 0 0.4rem; }
.rb-section.dash-rev-features .dash-rev-feature-item .rb-iconbox__body { color: rgba(255,255,255,0.65) !important; font-size: 0.9rem; line-height: 1.65; }

/* Button override for dark features panel */
.rb-section.dash-rev-features .rb-widget--button .rb-button.dash-rev-btn-primary,
/* Buttons in this section follow the suite-wide --rev-btn-* CTA contract
   (fill, shape, size and the shine hover) like every other button, no
   per-section gradient/lift override, so all buttons stay in sync. */

/* --- Process section: light grey, numbered SVG icons + decorative glow --- */
.rb-section.dash-rev-process {
    background: var(--dash-gray-light) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.dash-rev-process::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(10,102,194,0.08), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-process > .rb-section__inner { position: relative; z-index: 1; align-items: flex-start; }

.rb-section.dash-rev-process .dash-rev-process-step {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--dash-border);
    margin: 0;
    background: transparent;
}
.rb-section.dash-rev-process .dash-rev-process-step:last-child { border-bottom: 0; }
.rb-section.dash-rev-process .dash-rev-process-step .rb-iconbox__icon-wrap {
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1);
}
.rb-section.dash-rev-process .dash-rev-process-step:hover .rb-iconbox__icon-wrap {
    transform: scale(1.12) rotate(8deg);
}
.rb-section.dash-rev-process .dash-rev-process-step .rb-iconbox__title {
    font-size: 1.15rem;
    margin: 0 0 0.4rem;
    color: var(--dash-dark);
    transition: color 0.25s ease;
}
.rb-section.dash-rev-process .dash-rev-process-step:hover .rb-iconbox__title { color: var(--dash-primary); }
.rb-section.dash-rev-process .dash-rev-process-step .rb-iconbox__body { color: var(--dash-gray); font-size: 0.92rem; line-height: 1.7; }

/* Buttons follow the suite-wide --rev-btn-* CTA contract (see note above). */

/* --- Tech stack: 6-up icon-boxes with conic-halo on hover --- */
.rb-section.dash-rev-tech .rb-column {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
}
.rb-section.dash-rev-tech .dash-rev-tech-item {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 1.25rem 1rem;
    transition: var(--dash-transition);
    position: relative;
    isolation: isolate;
    margin: 0;
}
.rb-section.dash-rev-tech .dash-rev-tech-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--dash-radius-lg) + 2px);
    background: conic-gradient(from 0deg, transparent 0deg, var(--dash-primary) 80deg, var(--dash-secondary) 180deg, transparent 270deg);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .rb-section.dash-rev-tech .dash-rev-tech-item:hover::before { animation: dash-spin 4s linear infinite; }
}
.rb-section.dash-rev-tech .dash-rev-tech-item:hover {
    transform: translateY(-6px) scale(1.04);
    border-color: transparent;
    box-shadow: 0 16px 36px -12px rgba(10,102,194,0.3);
}
.rb-section.dash-rev-tech .dash-rev-tech-item:hover::before { opacity: 0.4; }
.rb-section.dash-rev-tech .dash-rev-tech-item .rb-iconbox__icon-wrap {
    color: var(--dash-gray);
    transition: transform 0.35s ease, color 0.25s ease;
}
.rb-section.dash-rev-tech .dash-rev-tech-item:hover .rb-iconbox__icon-wrap {
    transform: scale(1.18);
    color: var(--dash-primary);
}
.rb-section.dash-rev-tech .dash-rev-tech-item .rb-iconbox__icon--svg svg { fill: currentColor; transition: fill 0.25s ease; }
.rb-section.dash-rev-tech .dash-rev-tech-item .rb-iconbox__title {
    font-size: 0.75rem !important;
    font-weight: 600;
    color: var(--dash-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.5rem 0 0;
}

/* --- Testimonials: 3-up cards w/ quote watermark --- */
.rb-section.dash-rev-testimonials {
    background: var(--dash-gray-light) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.dash-rev-testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 5%, rgba(10,102,194,0.07), transparent 35%),
        radial-gradient(circle at 5% 95%, rgba(0,200,160,0.07), transparent 35%);
    pointer-events: none;
}
.rb-section.dash-rev-testimonials > .rb-section__inner { position: relative; z-index: 1; }

.rb-section.dash-rev-testimonials .rb-column {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}
.rb-section.dash-rev-testimonials .rb-widget--testimonial {
    margin: 0;
}
.rb-section.dash-rev-testimonials .rb-testimonial {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-lg);
    padding: 2rem;
    border-left-color: var(--dash-primary);
    overflow: hidden;
    transition: var(--dash-transition);
}
.rb-section.dash-rev-testimonials .rb-testimonial::before {
    content: '\201C';
    position: absolute;
    top: -28px; right: 14px;
    font-size: 7rem;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    color: var(--dash-primary);
    opacity: 0.08;
    font-weight: 900;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s ease;
}
.rb-section.dash-rev-testimonials .rb-testimonial:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -18px rgba(10,102,194,0.25);
}
.rb-section.dash-rev-testimonials .rb-testimonial:hover::before {
    opacity: 0.14;
    transform: scale(1.08) rotate(-6deg);
}
.rb-section.dash-rev-testimonials .rb-testimonial__quote {
    font-size: 0.95rem;
    color: var(--dash-dark);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-style: italic;
}
.rb-section.dash-rev-testimonials .rb-testimonial__name { color: var(--dash-dark); font-weight: 700; font-size: 0.92rem; }
.rb-section.dash-rev-testimonials .rb-testimonial__role { color: var(--dash-gray); font-size: 0.8rem; }

/* --- Blog grid: rb recent_posts laid out as 3-up cards --- */
.rb-section.dash-rev-blog { background: var(--dash-white) !important; }
.rb-section.dash-rev-blog .dash-rev-blog-list ul,
.rb-section.dash-rev-blog .dash-rev-blog-list ol,
.rb-section.dash-rev-blog .rb-widget--recent_posts > div,
.rb-section.dash-rev-blog .rb-widget--recent_posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
@media (max-width: 1024px) {
    .rb-section.dash-rev-blog .dash-rev-blog-list ul,
    .rb-section.dash-rev-blog .rb-widget--recent_posts ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .rb-section.dash-rev-blog .dash-rev-blog-list ul,
    .rb-section.dash-rev-blog .rb-widget--recent_posts ul { grid-template-columns: 1fr; }
}
.rb-section.dash-rev-blog .rb-widget--recent_posts li {
    background: var(--dash-white);
    border-radius: var(--dash-radius-lg);
    overflow: hidden;
    border: 1px solid var(--dash-border);
    transition: var(--dash-transition);
    padding: 1.5rem;
}
.rb-section.dash-rev-blog .rb-widget--recent_posts li:hover {
    box-shadow: 0 24px 50px -18px rgba(10,102,194,0.22);
    transform: translateY(-6px);
}
.rb-section.dash-rev-blog .rb-widget--recent_posts li a {
    font-weight: 700;
    color: var(--dash-dark);
    line-height: 1.4;
    text-decoration: none;
}
.rb-section.dash-rev-blog .rb-widget--recent_posts li:hover a { color: var(--dash-primary); }

/* --- CTA band: dark with layered glow + mesh + gradient headline --- */
.rb-section.dash-rev-cta {
    background:
        radial-gradient(ellipse 55% 60% at 25% 30%, rgba(10,102,194,0.45), transparent 60%),
        radial-gradient(ellipse 55% 60% at 75% 75%, rgba(0,200,160,0.30), transparent 60%),
        linear-gradient(135deg, #0a1422 0%, var(--dash-dark) 50%, #0a2540 100%) !important;
    text-align: center;
}
.rb-section.dash-rev-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 85%);
    pointer-events: none;
}
.rb-section.dash-rev-cta > .rb-section__inner { position: relative; z-index: 1; }
.rb-section.dash-rev-cta .rb-cta {
    background: transparent !important;
    color: var(--dash-white);
    padding: 1rem 0;
    border-radius: 0;
}
.rb-section.dash-rev-cta .rb-cta h2 {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    margin: 0 0 1rem;
    font-weight: 800;
}
.rb-section.dash-rev-cta .rb-cta p {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto 2rem;
}
/* Buttons follow the suite-wide --rev-btn-* CTA contract (see note above). */

/* --- Contact section: left details + right form, with floating form card --- */
.rb-section.dash-rev-contact {
    background: linear-gradient(180deg, var(--dash-white) 0%, #fafbfd 100%) !important;
    position: relative;
    overflow: hidden;
}
.rb-section.dash-rev-contact::before {
    content: '';
    position: absolute;
    top: 10%; right: -10%;
    width: 40%; height: 60%;
    background: radial-gradient(circle, rgba(10,102,194,0.06), transparent 70%);
    pointer-events: none;
}
.rb-section.dash-rev-contact > .rb-section__inner { position: relative; z-index: 1; align-items: flex-start; }

.rb-section.dash-rev-contact .dash-rev-contact-detail {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
    margin: 0 0 0.5rem;
    border-radius: var(--dash-radius-lg);
    transition: var(--dash-transition);
}
.rb-section.dash-rev-contact .dash-rev-contact-detail:hover {
    background: rgba(10,102,194,0.04);
    transform: translateX(6px);
}
.rb-section.dash-rev-contact .dash-rev-contact-detail .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, rgba(10,102,194,0.12), rgba(0,200,160,0.10)) !important;
    width: 40px;
    height: 40px;
    border-radius: var(--dash-radius);
    color: var(--dash-primary);
    transition: var(--dash-transition);
}
.rb-section.dash-rev-contact .dash-rev-contact-detail:hover .rb-iconbox__icon-wrap {
    background: linear-gradient(135deg, var(--dash-primary), var(--dash-secondary)) !important;
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 8px 20px -6px rgba(10,102,194,0.45);
}
.rb-section.dash-rev-contact .dash-rev-contact-detail:hover .rb-iconbox__icon--svg svg { fill: #ffffff !important; }
.rb-section.dash-rev-contact .dash-rev-contact-detail .rb-iconbox__title {
    font-size: 0.9rem;
    color: var(--dash-dark);
    font-weight: 600;
    margin: 0 0 0.2rem;
}
.rb-section.dash-rev-contact .dash-rev-contact-detail .rb-iconbox__body {
    color: var(--dash-gray);
    font-size: 0.88rem;
}
.rb-section.dash-rev-contact .dash-rev-contact-form {
    background: var(--dash-white);
    padding: 2.5rem;
    border-radius: var(--dash-radius-lg);
    box-shadow: 0 24px 60px -24px rgba(10,102,194,0.18);
    border: 1px solid var(--dash-border);
    position: relative;
}

/* --- Hero (rb_sec_hero output), overlay with aurora mesh similar to the
       hardcoded hero so the look survives even without a background image. --- */
/* The hero (first revblocks section) background + decorative glows now live on
   the section's own Background gradient + Decoration fields, set by
   rb_sec_hero() in inc/revblocks-installer.php. The hardcoded `!important`
   background + ::before blobs that used to sit here overrode those fields (so
   the section Background control did nothing), removed in favour of the
   field-driven version, which is editable in the builder. position/overflow
   are kept so any first section that opts into decorations still clips them. */
.rb-document > .rb-section:first-child {
    position: relative;
    overflow: hidden;
}
.rb-document > .rb-section:first-child .rb-hero {
    background: transparent !important;
    padding: 120px 24px 100px;
}
.rb-document > .rb-section:first-child .rb-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}
.rb-document > .rb-section:first-child .rb-hero p {
    font-size: 1.15rem;
    line-height: 1.8;
    opacity: 0.75;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
/* The measure above centres the paragraph. That suits a centred hero and no
   other: on a left-aligned one the eyebrow and sub-heading sat in the middle,
   indented away from the heading above them. Centring stays the default so
   heroes built before this keep the look they had; the alignment arrives as a
   class on the section from rev_rb_hero(). */
.rb-document > .rb-section.hero-align-left:first-child .rb-hero p {
    margin-left: 0;
    margin-right: auto;
}
.rb-document > .rb-section.hero-align-right:first-child .rb-hero p {
    margin-left: auto;
    margin-right: 0;
}
/* Hero (first-section) buttons follow the suite-wide --rev-btn-* CTA contract
   too, solid theme fill + shine hover, so they match every other button
   instead of a per-section gradient + lift. */

/* --- Responsive: stack grids on smaller screens --- */
@media (max-width: 1024px) {
    .rb-section.dash-rev-services .rb-column,
    .rb-section.dash-rev-testimonials .rb-column {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .rb-section.dash-rev-tech .rb-column {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .rb-section.dash-rev-features > .rb-section__inner,
    .rb-section.dash-rev-process > .rb-section__inner,
    .rb-section.dash-rev-contact > .rb-section__inner {
        flex-direction: column;
    }
    .rb-section.dash-rev-features .rb-column,
    .rb-section.dash-rev-process .rb-column,
    .rb-section.dash-rev-contact .rb-column {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
@media (max-width: 640px) {
    .rb-section.dash-rev-services .rb-column,
    .rb-section.dash-rev-testimonials .rb-column {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .rb-section.dash-rev-tech .rb-column {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* ==========================================================================
   NAVIGATION STYLES (Header tab → Navigation style / Top bar)
   Header surface, menu link style, dropdown style, mobile menu style, the
   split / side / dock layouts, hide-on-scroll and the two-tier top bar. Each
   option's first value is the original look, so none of this applies until a
   site picks something (inc/nav-styles.php holds the whitelists).
   ========================================================================== */
#dash-header {
    --hdr-accent: var(--dash-hdr-fg-hover, var(--dash-primary, #0a66c2));
    --hdr-rule: rgba(127, 127, 127, 0.22);
    --hdr-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Label wrappers from the walker: plain inline boxes, so the original look
   renders exactly as before; the drawn link styles make them blocks. */
.primary-nav .nav-label { position: relative; }
#dash-header.hdr-lx .primary-nav .nav-label,
#dash-header.hdr-lx .primary-nav .nav-label-in { display: inline-block; }
/* An icon set by hand (icon-* class) sits before the label. A fixed width
   keeps the row's own layout stable from first paint: without one, a
   fallback glyph before the icon font finishes loading can render at a
   different width than the real glyph, and the fit-check in main.js that
   measures this same row to decide whether the desktop nav fits can catch
   either width depending on timing. */
.primary-nav .nav-icon { display: inline-block; width: 1.1em; text-align: center; margin-right: 0.45em; font-size: 0.95em; }

/* ---- Menu link styles --------------------------------------------------- */
/* Every style but "Soft highlight" draws its own hover, so the tinted box
   goes. !important because the older header-state rules are very specific. */
#dash-header.hdr-lx .primary-nav > li > a { background: transparent !important; border-radius: 0; }

/* The drawn styles need the menu items at full header height, so dropdowns
   open at the header's bottom edge instead of on top of the line or dot under
   the hovered link. (The original soft highlight keeps its compact items.) */
@media (min-width: 1025px) {
    #dash-header.hdr-lx:not(.header-layout-stacked) .header-inner > :is(#primary-nav, #primary-nav-2) { align-self: stretch; }
    #dash-header.hdr-lx.header-layout-center #primary-nav { top: 0; bottom: 0; transform: translateX(-50%); }
    /* Stacked has two rows, so open the dropdown a little lower instead; the
       invisible strip keeps the hover alive across the gap. */
    #dash-header.hdr-lx.header-layout-stacked .primary-nav > li > .sub-menu { top: calc(100% + 12px); }
    #dash-header.hdr-lx.header-layout-stacked .primary-nav > li > .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
}

/* Underline, center underline, overline, strikethrough: one line, grown in.
   The Sliding bar no-JS fallback sits inside :where() so it adds no weight;
   bare, its :not() made this rule outrank the center-origin override below,
   and Center underline and Overline grew from the left like Underline. */
#dash-header:is(.hdr-links-underline, .hdr-links-underline-center, .hdr-links-overline, .hdr-links-strike, :where(.hdr-links-slide:not(.hdr-ind-ready))) .primary-nav > li > a .nav-label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--hdr-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--hdr-ease);
}
#dash-header.hdr-links-underline-center .primary-nav > li > a .nav-label::after,
#dash-header.hdr-links-overline .primary-nav > li > a .nav-label::after {
    transform-origin: center;
    /* Growing from the center covers only half the distance in each direction
       compared to a left-origin sweep, so at the shared .35s/ease-out timing
       it reads as a quick pop instead of a visible grow. A longer transition
       with a slight overshoot makes the outward motion unmistakable. */
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
#dash-header.hdr-links-overline .primary-nav > li > a .nav-label::after { bottom: auto; top: -8px; }
#dash-header.hdr-links-strike .primary-nav > li > a .nav-label::after { bottom: auto; top: 52%; height: 2px; }
#dash-header:is(.hdr-links-underline, .hdr-links-underline-center, .hdr-links-overline, .hdr-links-strike, :where(.hdr-links-slide:not(.hdr-ind-ready))) .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::after {
    transform: scaleX(1);
}

/* Brackets. */
#dash-header.hdr-links-bracket .primary-nav > li > a .nav-label::before,
#dash-header.hdr-links-bracket .primary-nav > li > a .nav-label::after {
    position: absolute;
    top: 50%;
    color: var(--hdr-accent);
    font-weight: 300;
    opacity: 0;
    transition: opacity .25s ease, transform .3s var(--hdr-ease);
}
#dash-header.hdr-links-bracket .primary-nav > li > a .nav-label::before { content: '['; left: -0.65em; transform: translate(6px, -52%); }
#dash-header.hdr-links-bracket .primary-nav > li > a .nav-label::after  { content: ']'; right: -0.65em; transform: translate(-6px, -52%); }
#dash-header.hdr-links-bracket .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::before,
#dash-header.hdr-links-bracket .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::after {
    opacity: 1;
    transform: translate(0, -52%);
}

/* Dot. */
#dash-header.hdr-links-dot .primary-nav > li > a .nav-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--hdr-accent);
    transform: scale(0);
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
#dash-header.hdr-links-dot .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::after { transform: scale(1); }

/* Filled block: the item fills with brand color from the top. */
#dash-header.hdr-links-fill .primary-nav { gap: 0; }
#dash-header.hdr-links-fill .primary-nav > li > a { position: relative; isolation: isolate; }
#dash-header.hdr-links-fill .primary-nav > li > a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--dash-primary, #0a66c2);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s var(--hdr-ease);
}
#dash-header.hdr-links-fill .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a { color: #fff !important; }
#dash-header.hdr-links-fill .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a::before { transform: scaleY(1); }

/* Text roll: the word slides up and a colored copy rolls in underneath. */
#dash-header.hdr-links-roll .primary-nav > li > a .nav-label { overflow: hidden; vertical-align: top; }
#dash-header.hdr-links-roll .primary-nav > li > a .nav-label-in { position: relative; transition: transform .45s cubic-bezier(.7, 0, .3, 1); }
#dash-header.hdr-links-roll .primary-nav > li > a .nav-label-in::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    color: var(--hdr-accent);
    white-space: nowrap;
}
#dash-header.hdr-links-roll .primary-nav > li:is(:hover, :focus-within) > a .nav-label-in { transform: translateY(-100%); }
#dash-header.hdr-links-roll .primary-nav > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }

/* Tracked caps with a dash that grows in front. */
#dash-header.hdr-links-caps .primary-nav > li > a {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.74rem;
    font-weight: 600;
}
#dash-header.hdr-links-caps .primary-nav > li > a .nav-label::before {
    content: '';
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    width: 12px;
    height: 1.5px;
    background: var(--hdr-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s var(--hdr-ease);
}
#dash-header.hdr-links-caps .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }
#dash-header.hdr-links-caps .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::before { transform: scaleX(1); }

/* Icon + label: icon stacked above a small label. */
#dash-header.hdr-links-icons .primary-nav > li > a {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    font-size: 0.74rem;
    font-weight: 600;
}
#dash-header.hdr-links-icons .primary-nav > li > a .nav-icon {
    margin: 0;
    font-size: 1.1rem;
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), color .2s ease;
}
#dash-header.hdr-links-icons .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }
#dash-header.hdr-links-icons .primary-nav > li:is(:hover, :focus-within) > a .nav-icon { transform: translateY(-3px); }

/* Numbered: 01, 02, 03 above each label. */
#dash-header.hdr-links-numbered .header-inner { counter-reset: hdrnav; }
#dash-header.hdr-links-numbered .primary-nav > li { counter-increment: hdrnav; }
#dash-header.hdr-links-numbered .primary-nav > li > a .nav-label::before {
    content: counter(hdrnav, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -1.05em;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hdr-accent);
    opacity: 0.6;
    transition: opacity .2s ease, transform .3s var(--hdr-ease);
}
#dash-header.hdr-links-numbered .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }
#dash-header.hdr-links-numbered .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::before { opacity: 1; transform: translateY(-2px); }

/* Sliding bar / sliding pill / liquid blob: one indicator element (added by
   main.js) glides to whichever link is hovered, and rests on the current
   page. Without JS they fall back to a plain underline / tint / fill. */
#dash-header .nav-ind {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: transform .4s var(--hdr-ease), width .4s var(--hdr-ease), height .4s var(--hdr-ease), opacity .25s ease;
}
#dash-header .nav-ind.is-on { opacity: 1; }
#dash-header.hdr-ind-ready :is(#primary-nav, #primary-nav-2) { isolation: isolate; }
#dash-header.hdr-links-slide .nav-ind { background: var(--hdr-accent); border-radius: 2px; }
#dash-header.hdr-links-pill .nav-ind { background: color-mix(in srgb, var(--hdr-accent) 16%, transparent); border-radius: 999px; }
#dash-header.hdr-links-blob .nav-ind {
    background: var(--dash-primary, #0a66c2);
    border-radius: 999px;
    transition: transform .5s cubic-bezier(.68, -0.35, .27, 1.35), width .5s cubic-bezier(.68, -0.35, .27, 1.35), height .3s ease, opacity .25s ease;
}
#dash-header.hdr-links-blob .primary-nav > li.is-ind > a { color: #fff !important; }
#dash-header.hdr-links-pill:not(.hdr-ind-ready) .primary-nav > li:is(:hover, .current-menu-item) > a { background: color-mix(in srgb, var(--hdr-accent) 16%, transparent) !important; border-radius: 999px; }
#dash-header.hdr-links-blob:not(.hdr-ind-ready) .primary-nav > li:is(:hover, .current-menu-item) > a { background: var(--dash-primary, #0a66c2) !important; color: #fff !important; border-radius: 999px; }

/* ---- Dropdown styles (desktop) ------------------------------------------ */
.primary-nav .nav-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dash-gray, #6b7280);
    white-space: normal;
}

@media (min-width: 1025px) {
    /* Minimal: no card, a thin brand line on top, an arrow slides in. */
    #dash-header.hdr-dd-minimal .primary-nav .sub-menu {
        border: 0;
        border-top: 2px solid var(--dash-primary, #0a66c2);
        border-radius: 0 0 6px 6px;
        padding: 0.4rem 0;
        min-width: 210px;
        box-shadow: 0 18px 34px -18px rgba(13, 27, 42, 0.4);
    }
    #dash-header.hdr-dd-minimal .primary-nav .sub-menu li a {
        position: relative;
        border-radius: 0;
        padding: 0.55rem 2rem 0.55rem 1.1rem;
        font-size: 0.86rem;
    }
    #dash-header.hdr-dd-minimal .primary-nav .sub-menu li a::after {
        content: '\2192';
        position: absolute;
        right: 1rem;
        top: 50%;
        opacity: 0;
        transform: translate(-6px, -50%);
        transition: opacity .2s ease, transform .25s var(--hdr-ease);
    }
    #dash-header.hdr-dd-minimal .primary-nav .sub-menu li a:hover { background: transparent; padding-left: 1.1rem; color: var(--dash-primary, #0a66c2); }
    #dash-header.hdr-dd-minimal .primary-nav .sub-menu li a:hover::after { opacity: 1; transform: translate(0, -50%); }

    /* Full-width panel: main.js stretches it across the screen; the links
       sit in a centered row. */
    #dash-header.hdr-dd-panel .primary-nav > li > .sub-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0.75rem;
        min-width: 0;
        padding: 1.25rem 2rem 1.5rem;
        border-left: 0;
        border-right: 0;
        border-radius: 0 0 var(--dash-radius-lg, 12px) var(--dash-radius-lg, 12px);
        box-shadow: 0 30px 50px -30px rgba(13, 27, 42, 0.45);
    }
    #dash-header.hdr-dd-panel .primary-nav > li > .sub-menu > li > a {
        min-width: 180px;
        max-width: 260px;
        padding: 0.85rem 1.1rem;
        border-radius: 10px;
    }
    #dash-header.hdr-dd-panel .primary-nav > li > .sub-menu > li > a:hover { padding-left: 1.1rem; }

    /* Mega menu: second-level items become columns, third-level items list
       under them, and the top item's featured image is a promo tile.
       Only a dropdown that HAS column groups becomes a grid. A dropdown of
       plain links keeps the ordinary card, so four links are never strung
       across a full-width bar (main.js leaves its width alone to match). */
    #dash-header.hdr-dd-mega .primary-nav > li > .sub-menu:has(> li.menu-item-has-children) {
        display: grid;
        /* Fixed tracks, not stretched: a panel with three columns keeps them
           together instead of spreading them edge to edge. main.js sizes the
           panel from the same numbers (190px track, 1.5rem gap, 1.5rem
           padding), so five columns fit inside the centered 1100px maximum. */
        grid-template-columns: repeat(auto-fit, 190px);
        /* Two rows per band of columns, the headings and then the items, with
           each column taking both (subgrid below). Headings then line up even
           when one of them wraps onto a second line, and so do the first items
           under them. Without subgrid support each column is an ordinary grid
           and simply stacks, which is the old behavior. */
        grid-template-rows: auto 1fr;
        justify-content: start;
        align-items: start;
        gap: 1rem 1.5rem;
        min-width: 560px;
        padding: 1.5rem;
        /* Descriptions make a panel tall. Scroll it rather than clip it or let
           it run past the bottom of the window. */
        max-height: min(70vh, 620px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #dash-header.hdr-dd-mega .primary-nav > li.has-mega-img > .sub-menu:has(> li.menu-item-has-children)::after {
        content: '';
        grid-row: span 2;
        min-height: 170px;
        border-radius: calc(var(--dash-radius-lg, 12px) - 4px);
        background: var(--mega-img) center / cover no-repeat;
    }
    /* One column group = one column, so its items line up under the heading. */
    #dash-header.hdr-dd-mega .primary-nav > li > .sub-menu > li.menu-item-has-children {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        align-content: start;
    }
    /* Column heading. The rule under it and the gap above the first item are
       what make it read as a heading rather than as the column's first link. */
    #dash-header.hdr-dd-mega .primary-nav > li > .sub-menu > li.menu-item-has-children > :is(a, .nav-label-static) {
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--dash-gray, #6b7280);
        padding: 0.15rem 0.75rem 0.55rem;
        margin-bottom: 0.5rem;
        border-radius: 0;
        border-bottom: 1px solid var(--dd-rule, var(--dash-border, #e5e7eb));
    }
    #dash-header.hdr-dd-mega .primary-nav > li > .sub-menu > li.menu-item-has-children > a:hover { background: transparent; padding-left: 0.75rem; color: var(--dash-primary, #0a66c2); }
    #dash-header.hdr-dd-mega .primary-nav .sub-menu .sub-menu {
        position: static;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        transform: none;
        opacity: 1;
        visibility: inherit;
        pointer-events: inherit;
    }
    /* An item with a description is two lines inside ONE hit area: the title,
       then the description, muted and smaller under it. */
    #dash-header.hdr-dd-mega .primary-nav .sub-menu li :is(a, .nav-label-static) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0.45rem 0.75rem;
        line-height: 1.35;
    }
    #dash-header.hdr-dd-mega .primary-nav .sub-menu li a:hover { padding-left: 0.75rem; }
    #dash-header.hdr-dd-mega .primary-nav .sub-menu .nav-desc { font-size: 0.75rem; }

    /* Image preview: the list on the left, the hovered link's featured image
       on the right (main.js adds .has-previews when there are images). */
    #dash-header.hdr-dd-image .primary-nav > li > .sub-menu.has-previews {
        min-width: 520px;
        min-height: 190px;
        padding-right: calc(230px + 1rem);
    }
    #dash-header.hdr-dd-image .primary-nav > li > .sub-menu.has-previews::after {
        content: '';
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        width: 230px;
        border-radius: calc(var(--dash-radius-lg, 12px) - 4px);
        background: var(--dd-preview, var(--dash-gray-light, #f3f4f6)) center / cover no-repeat;
    }
}

/* ---- Header surfaces ---------------------------------------------------- */
/* Floating pill: the header itself goes clear, the container becomes the
   rounded island. */
/* The strip behind the pill is transparent on every page, so the pill floats
   over the page. An explicit "Pill backdrop background" (Header tab) wins. */
#dash-header.hdr-surface-pill,
#dash-header.hdr-surface-pill.header-light,
#dash-header.hdr-surface-pill.scrolled,
#dash-header.hdr-surface-pill.header-transparent.scrolled {
    background: var(--dash-header-pill-backdrop-bg, transparent);
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Contain the pill's 12px top margin: left to collapse through the header,
       the margin sat outside the sticky box, so once the header pinned to the
       top the pill touched the top edge of the screen. */
    display: flow-root;
}
#dash-header.hdr-surface-pill.scrolled,
#dash-header.hdr-surface-pill.header-transparent.scrolled {
    background: var(--dash-header-pill-backdrop-bg, transparent);
}
#dash-header.hdr-surface-pill > .container {
    width: calc(100% - 24px);
    margin: 12px auto 0;
    padding: 0 12px 0 24px;
    background: var(--dash-header-bg, #fff);
    border-radius: 999px;
    box-shadow: 0 12px 32px -14px rgba(13, 27, 42, 0.35), 0 0 0 1px rgba(13, 27, 42, 0.06);
    /* Visual properties only, not `all`: the fit-check in main.js toggles
       header-fit-wide on this same element to change its max-width, then
       re-measures synchronously on the same tick. A transitioned max-width
       was still mid-animation at that read, so the check always saw the
       pre-widen value, concluded widening never helped, and fell back to
       the hamburger even with the whole screen empty. Width/max-width/margin
       must change instantly for that measurement to be correct. */
    transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}
#dash-header.hdr-surface-pill .header-inner { min-height: 64px; }
#dash-header.hdr-surface-pill.header-layout-stacked > .container { border-radius: 26px; }
#dash-header.hdr-surface-pill.header-transparent:not(.scrolled) > .container {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Frosted glass: a see-through tint of the header color plus a blur. */
#dash-header.hdr-surface-glass,
#dash-header.hdr-surface-glass.header-light,
#dash-header.hdr-surface-glass.scrolled,
#dash-header.hdr-surface-glass.header-transparent.scrolled {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 34px -18px rgba(13, 27, 42, 0.35);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
}
#dash-header.hdr-surface-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--dash-header-bg, #fff);
    opacity: 0.62;
    pointer-events: none;
    transition: opacity .3s ease;
}
#dash-header.hdr-surface-glass.header-transparent:not(.scrolled) {
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#dash-header.hdr-surface-glass.header-transparent:not(.scrolled)::before { opacity: 0; }

/* Boxed / framed: brand rule on top, framed and divided menu. */
#dash-header.hdr-surface-boxed { border-top: 4px solid var(--dash-primary, #0a66c2); }
@media (min-width: 1025px) {
    #dash-header.hdr-surface-boxed .header-inner {
        border-left: 1px solid var(--hdr-rule);
        border-right: 1px solid var(--hdr-rule);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    #dash-header.hdr-surface-boxed .primary-nav { gap: 0; }
    #dash-header.hdr-surface-boxed .primary-nav > li + li { border-left: 1px solid var(--hdr-rule); }
    #dash-header.hdr-surface-boxed .primary-nav > li > a { border-radius: 0; }
    #dash-header.hdr-surface-boxed .header-cta .btn { border-radius: 0; }
}

/* ---- Top bar (two-tier header) ------------------------------------------ */
.hdr-topbar {
    background: var(--hdr-topbar-bg, var(--dash-dark, #0d1b2a));
    color: var(--hdr-topbar-fg, rgba(255, 255, 255, 0.86));
    font-size: 0.8rem;
    line-height: 1.4;
    transition: background .3s ease;
}
#dash-header.header-transparent:not(.scrolled) .hdr-topbar { background: rgba(0, 0, 0, 0.28); }
.hdr-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.hdr-topbar-left, .hdr-topbar-right { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.hdr-topbar a { color: inherit; text-decoration: none; opacity: 0.9; transition: opacity .2s ease; }
.hdr-topbar a:hover { opacity: 1; text-decoration: underline; }
.hdr-topbar-link i { margin-right: 0.35em; font-size: 0.9em; }
.hdr-topbar-menu { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.hdr-topbar-social { display: inline-flex; gap: 0.8rem; }
.hdr-topbar-social a:hover { text-decoration: none; }
@media (max-width: 768px) {
    .hdr-topbar-left, .hdr-topbar-menu, .hdr-topbar-social { display: none; }
    .hdr-topbar-inner { justify-content: center; }
}

/* ---- Hide on scroll ----------------------------------------------------- */
#dash-header.hdr-hide-on-scroll.hdr-is-hidden { transform: translateY(-100%); box-shadow: none; }

/* ---- Split logo layout (desktop) ---------------------------------------- */
@media (min-width: 1025px) {
    #dash-header.header-layout-split .header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: stretch;
        position: relative;
        gap: 0 2.5rem;
    }
    #dash-header.header-layout-split:not(.hdr-lx) .hdr-split-nav { align-self: center; }
    #dash-header.header-layout-split .hdr-split-nav--first  { grid-column: 1; justify-self: end; }
    #dash-header.header-layout-split .site-logo             { grid-column: 2; justify-self: center; align-self: center; }
    #dash-header.header-layout-split .hdr-split-nav--second { grid-column: 3; justify-self: start; }
    #dash-header.header-layout-split .hdr-split-lead,
    #dash-header.header-layout-split .hdr-split-actions {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    #dash-header.header-layout-split .hdr-split-lead    { left: 0; }
    #dash-header.header-layout-split .hdr-split-actions { right: 0; }
}
@media (max-width: 1024px) {
    #dash-header .hdr-split-nav,
    #dash-header .hdr-split-actions { display: none; }
}

/* ---- Side header layouts, left and right (desktop) ---------------------- */
@media (min-width: 1025px) {
    body.hdr-layout-side { --hdr-side-w: 270px; padding-left: var(--hdr-side-w); }
    body.hdr-layout-side-right { --hdr-side-w: 270px; padding-right: var(--hdr-side-w); }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: var(--hdr-side-w);
        transform: none;
        border-bottom: 0;
        border-right: 1px solid var(--dash-border, #e5e7eb);
    }
    body.admin-bar:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header { top: 32px; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header > .container { height: 100%; max-width: none; padding: 2rem 1.25rem; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .header-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: 100%;
        min-height: 0;
        padding: 0;
        gap: 1.75rem;
    }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .site-logo { align-self: flex-start; padding: 0 0.85rem; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header #primary-nav { width: 100%; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .primary-nav { flex-direction: column; align-items: stretch; height: auto; gap: 2px; width: 100%; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .primary-nav > li > a { height: auto; padding: 0.65rem 0.85rem; font-size: 0.98rem; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header.hdr-links-icons .primary-nav > li > a { flex-direction: row; justify-content: flex-start; gap: 0.75rem; font-size: 0.95rem; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header.hdr-links-icons .primary-nav .nav-icon { width: 1.25em; text-align: center; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .primary-nav .sub-menu { top: 0; left: 100%; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .header-right-nav { flex-direction: column; align-items: flex-start; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .header-widgets { display: flex; flex-wrap: wrap; padding: 0 0.85rem; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .header-cta { margin-top: auto; flex-direction: column; align-items: stretch; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .header-cta .btn { justify-content: center; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .hdr-topbar { display: none; }
    /* The page banner reserves room for a top header with an inline margin;
       there is no top header here. */
    body:is(.hdr-layout-side, .hdr-layout-side-right) .dash-page-banner { margin-top: 0 !important; }
    /* Surfaces on the sidebar. */
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header.hdr-surface-pill {
        top: 14px;
        bottom: 14px;
        left: 14px;
        border-radius: 24px;
        border: 0;
        background: var(--dash-header-bg, #fff);
        box-shadow: 0 20px 50px -20px rgba(13, 27, 42, 0.4), 0 0 0 1px rgba(13, 27, 42, 0.06);
    }
    body.hdr-layout-side:has(#dash-header.hdr-surface-pill) { padding-left: calc(var(--hdr-side-w) + 14px); }
    body.hdr-layout-side-right:has(#dash-header.hdr-surface-pill) { padding-right: calc(var(--hdr-side-w) + 14px); }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header.hdr-surface-pill > .container { width: auto; margin: 0; background: none; box-shadow: none; border-radius: 0; padding: 2rem 1.25rem; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header.hdr-surface-boxed { border-top: 0; border-right: 4px solid var(--dash-primary, #0a66c2); }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header.hdr-surface-boxed .header-inner { border: 0; padding: 0; }
    body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header.hdr-surface-boxed .primary-nav > li + li { border-left: 0; border-top: 1px solid var(--hdr-rule); }
    /* Right-hand variant: mirrored, with flyouts opening to the left. */
    body.hdr-layout-side-right #dash-header { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--dash-border, #e5e7eb); }
    body.hdr-layout-side-right #dash-header .primary-nav .sub-menu { left: auto; right: 100%; }
    body.hdr-layout-side-right #dash-header.hdr-surface-pill { left: auto; right: 14px; }
    body.hdr-layout-side-right #dash-header.hdr-surface-boxed { border-right: 0; border-left: 4px solid var(--dash-primary, #0a66c2); }
}

/* ---- Bottom dock layout (desktop) --------------------------------------- */
@media (min-width: 1025px) {
    body.hdr-layout-dock { padding-bottom: 110px; }
    body.hdr-layout-dock #dash-header {
        position: fixed;
        top: auto;
        bottom: 20px;
        left: 50%;
        right: auto;
        width: auto;
        max-width: calc(100% - 40px);
        transform: translateX(-50%);
        border: 1px solid rgba(127, 127, 127, 0.18);
        border-radius: 22px;
        box-shadow: 0 22px 50px -18px rgba(13, 27, 42, 0.5);
    }
    body.hdr-layout-dock #dash-header.hdr-surface-bar,
    body.hdr-layout-dock #dash-header.hdr-surface-boxed,
    body.hdr-layout-dock #dash-header.hdr-surface-pill { background: var(--dash-header-bg, #fff); }
    body.hdr-layout-dock #dash-header.hdr-surface-pill { border-radius: 999px; }
    body.hdr-layout-dock #dash-header.hdr-surface-boxed { border-radius: 6px; border-top-width: 4px; }
    body.hdr-layout-dock #dash-header.hdr-hide-on-scroll.hdr-is-hidden { transform: translate(-50%, calc(100% + 40px)); }
    body.hdr-layout-dock #dash-header > .container { width: auto; max-width: none; margin: 0; padding: 0 10px 0 18px; background: none; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
    body.hdr-layout-dock #dash-header .header-inner { min-height: 0; padding: 8px 0; gap: 1rem; border: 0; }
    body.hdr-layout-dock #dash-header .site-logo-img,
    body.hdr-layout-dock #dash-header .site-logo img { height: 34px; }
    body.hdr-layout-dock #dash-header .primary-nav { gap: 2px; }
    body.hdr-layout-dock #dash-header .primary-nav > li > a {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        height: auto;
        padding: 6px 12px;
        font-size: 0.72rem;
        border-radius: 14px;
    }
    body.hdr-layout-dock #dash-header .primary-nav .nav-icon {
        margin: 0;
        font-size: 1.3rem;
        transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
    }
    /* macOS-style magnification: the hovered icon and its neighbors grow. */
    body.hdr-layout-dock #dash-header .primary-nav > li:hover .nav-icon { transform: translateY(-8px) scale(1.35); }
    body.hdr-layout-dock #dash-header .primary-nav > li:hover + li .nav-icon,
    body.hdr-layout-dock #dash-header .primary-nav > li:has(+ li:hover) .nav-icon { transform: translateY(-4px) scale(1.15); }
    body.hdr-layout-dock #dash-header .primary-nav .sub-menu { top: auto; bottom: 100%; transform: translateY(-4px); }
    body.hdr-layout-dock #dash-header .primary-nav > li:hover > .sub-menu,
    body.hdr-layout-dock #dash-header .primary-nav > li:focus-within > .sub-menu { transform: translateY(-10px); }
    body.hdr-layout-dock #dash-header .hdr-topbar { display: none; }
    body.hdr-layout-dock .dash-page-banner { margin-top: 0 !important; }
    body.hdr-layout-dock #scroll-top { bottom: 110px; }
}

/* ---- Mobile menu styles ------------------------------------------------- */
/* Big staggered type. */
.mobile-nav.mobile-nav--stagger { transform: none; transition: opacity .3s ease, visibility 0s linear .45s; }
/* Big type needs a calm backdrop, so this style is near-solid by default. */
.mobile-nav.mobile-nav--stagger:not(.mobile-nav--solid) { background: color-mix(in srgb, var(--dash-dark, #0d1b2a) 94%, transparent); }
.mobile-nav.mobile-nav--stagger.active { transition-delay: 0s; }
.mobile-nav--stagger > ul { counter-reset: mnav; }
.mobile-nav--stagger > ul > li {
    counter-increment: mnav;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.mobile-nav--stagger.active > ul > li { opacity: 1; transform: none; }
.mobile-nav--stagger.active > ul > li:nth-child(1)  { transition-delay: .08s; }
.mobile-nav--stagger.active > ul > li:nth-child(2)  { transition-delay: .14s; }
.mobile-nav--stagger.active > ul > li:nth-child(3)  { transition-delay: .20s; }
.mobile-nav--stagger.active > ul > li:nth-child(4)  { transition-delay: .26s; }
.mobile-nav--stagger.active > ul > li:nth-child(5)  { transition-delay: .32s; }
.mobile-nav--stagger.active > ul > li:nth-child(6)  { transition-delay: .38s; }
.mobile-nav--stagger.active > ul > li:nth-child(7)  { transition-delay: .44s; }
.mobile-nav--stagger.active > ul > li:nth-child(8)  { transition-delay: .50s; }
.mobile-nav--stagger.active > ul > li:nth-child(n+9) { transition-delay: .56s; }
.mobile-nav--stagger > ul > li > a {
    font-size: clamp(1.9rem, 7vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    padding: 12px 0;
    border-bottom: 0;
}
.mobile-nav--stagger > ul > li > a::before {
    content: counter(mnav, decimal-leading-zero);
    display: inline-block;
    min-width: 2.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    vertical-align: top;
    color: var(--dash-secondary, #00c8a0);
}

/* Circle reveal from the menu button (main.js sets the origin). */
.mobile-nav.mobile-nav--circle {
    transform: none;
    opacity: 1;
    clip-path: circle(0 at var(--mnav-x, calc(100% - 44px)) var(--mnav-y, 40px));
    transition: clip-path .6s cubic-bezier(.7, 0, .25, 1), visibility 0s linear .6s;
}
.mobile-nav.mobile-nav--circle:not(.mobile-nav--solid) {
    background: color-mix(in srgb, var(--dash-dark, #0d1b2a) 94%, transparent);
}
.mobile-nav.mobile-nav--circle.active {
    clip-path: circle(150vmax at var(--mnav-x, calc(100% - 44px)) var(--mnav-y, 40px));
    transition-delay: 0s;
}

/* Drawers, bottom sheet and the tab bar's sheet: above the header, with a
   close button and a dimmed page behind. */
.mobile-nav:is(.mobile-nav--drawer-left, .mobile-nav--drawer-right, .mobile-nav--sheet, .mobile-nav--tabbar) {
    z-index: 10003;
    opacity: 1;
    background: var(--dash-dark, #0d1b2a);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.35);
}
.mobile-nav.mobile-nav--drawer-left,
.mobile-nav.mobile-nav--drawer-right {
    top: 0;
    bottom: 0;
    max-height: none;
    width: min(380px, 86vw);
    padding: 72px 28px 32px;
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .42s;
}
.mobile-nav.mobile-nav--drawer-left  { right: auto; transform: translateX(-100%); }
.mobile-nav.mobile-nav--drawer-right { left: auto; transform: translateX(100%); }
.mobile-nav.mobile-nav--sheet,
.mobile-nav.mobile-nav--tabbar {
    top: auto;
    max-height: 85vh;
    border-radius: 22px 22px 0 0;
    padding: 40px 24px calc(28px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .42s;
}
.mobile-nav.mobile-nav--sheet::before,
.mobile-nav.mobile-nav--tabbar::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    width: 44px;
    height: 5px;
    margin-left: -22px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
}
.mobile-nav:is(.mobile-nav--drawer-left, .mobile-nav--drawer-right, .mobile-nav--sheet, .mobile-nav--tabbar).active { transform: none; transition-delay: 0s; }
.mobile-nav:is(.mobile-nav--drawer-left, .mobile-nav--drawer-right, .mobile-nav--sheet, .mobile-nav--tabbar) > ul > li > :is(a, .nav-label-static) { font-size: 1.15rem; padding: 14px 0; }
.mobile-nav-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.mobile-nav-close:hover { background: rgba(255, 255, 255, 0.2); }
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: rgba(8, 14, 24, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
body.nav-open .mobile-nav-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Bottom tab bar (tablet / phone). */
.hdr-tabbar { display: none; }
@media (max-width: 1024px) {
    .hdr-tabbar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9997;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: var(--dash-header-bg, #fff);
        border-top: 1px solid var(--dash-border, #e5e7eb);
        box-shadow: 0 -8px 24px -12px rgba(13, 27, 42, 0.25);
    }
    .hdr-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        min-width: 0;
        padding: 6px 2px;
        border: 0;
        background: none;
        font: inherit;
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--dash-header-fg-solid, var(--dash-gray, #6b7280));
        text-decoration: none;
        cursor: pointer;
    }
    .hdr-tab i { font-size: 1.15rem; }
    .hdr-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hdr-tab.is-current,
    .hdr-tab:hover { color: var(--dash-primary, #0a66c2); }
    body.hdr-mnav-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    body.hdr-mnav-tabbar #dash-header .menu-toggle { display: none !important; }
    body.hdr-mnav-tabbar #scroll-top { bottom: 84px; }
}

/* ==========================================================================
   NAVIGATION STYLES, BATCH 2: rail / two-row / showcase / command layouts and
   the motion link styles. As with batch 1, nothing here applies until a site
   picks the option on the Header tab.
   ========================================================================== */

/* ---- Icon rail (desktop): a slim column of icons that opens on hover ---- */
@media (min-width: 1025px) {
    body.hdr-layout-rail { --hdr-rail-w: 78px; --hdr-rail-open: 270px; padding-left: var(--hdr-rail-w); }
    body.hdr-layout-rail #dash-header {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: var(--hdr-rail-w);
        overflow: hidden;
        transform: none;
        border-bottom: 0;
        border-right: 1px solid var(--dash-border, #e5e7eb);
        transition: width .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
    }
    body.admin-bar.hdr-layout-rail #dash-header { top: 32px; }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) {
        width: var(--hdr-rail-open);
        box-shadow: 24px 0 60px -24px rgba(13, 27, 42, 0.45);
    }
    body.hdr-layout-rail #dash-header > .container { height: 100%; max-width: none; width: var(--hdr-rail-open); padding: 1.25rem 0.85rem; }
    body.hdr-layout-rail #dash-header .header-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: 100%;
        min-height: 0;
        padding: 0;
        gap: 1.5rem;
    }
    body.hdr-layout-rail #dash-header .site-logo { align-self: flex-start; padding: 0 0.35rem; }
    body.hdr-layout-rail #dash-header .site-logo img { height: 36px; }
    body.hdr-layout-rail #dash-header #primary-nav { width: 100%; }
    body.hdr-layout-rail #dash-header .primary-nav { flex-direction: column; align-items: stretch; height: auto; gap: 4px; }
    body.hdr-layout-rail #dash-header .primary-nav > li { display: block; }
    body.hdr-layout-rail #dash-header .primary-nav > li > a {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1.1rem;
        height: auto;
        padding: 0.75rem 1rem;
        border-radius: 12px;
        font-size: 0.95rem;
        white-space: nowrap;
    }
    body.hdr-layout-rail #dash-header .primary-nav .nav-icon {
        flex: 0 0 22px;
        width: 22px;
        margin: 0;
        font-size: 1.15rem;
        text-align: center;
        transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
    }
    body.hdr-layout-rail #dash-header .primary-nav > li:hover .nav-icon { transform: scale(1.18); }
    /* Labels slide in one after another as the rail opens. */
    body.hdr-layout-rail #dash-header .primary-nav > li > a .nav-label {
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
    }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .primary-nav > li > a .nav-label { opacity: 1; transform: none; }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .primary-nav > li:nth-child(2) > a .nav-label { transition-delay: .03s; }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .primary-nav > li:nth-child(3) > a .nav-label { transition-delay: .06s; }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .primary-nav > li:nth-child(4) > a .nav-label { transition-delay: .09s; }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .primary-nav > li:nth-child(5) > a .nav-label { transition-delay: .12s; }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .primary-nav > li:nth-child(n+6) > a .nav-label { transition-delay: .15s; }
    /* Submenus open underneath their item (a flyout would be clipped). */
    body.hdr-layout-rail #dash-header .primary-nav .sub-menu {
        position: static;
        display: none;
        min-width: 0;
        margin: 2px 0 6px 2.9rem;
        padding: 0.25rem;
        box-shadow: none;
        border: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        background: transparent;
    }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .primary-nav > li:is(:hover, :focus-within) > .sub-menu { display: block; }
    body.hdr-layout-rail #dash-header #header-right-nav,
    body.hdr-layout-rail #dash-header .header-widgets,
    body.hdr-layout-rail #dash-header .hdr-topbar { display: none; }
    body.hdr-layout-rail #dash-header .header-cta { margin-top: auto; opacity: 0; transition: opacity .3s ease; }
    body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .header-cta { opacity: 1; }
    body.hdr-layout-rail .dash-page-banner { margin-top: 0 !important; }
    /* Floating pill on the rail: the whole rail becomes an inset rounded
       panel, like the side header does; the round-ended container of the
       horizontal pill would be clipped by the narrow rail. */
    body.hdr-layout-rail #dash-header.hdr-surface-pill {
        top: 14px;
        bottom: 14px;
        left: 14px;
        border: 0;
        border-radius: 22px;
        background: var(--dash-header-bg, #fff);
        box-shadow: 0 20px 50px -20px rgba(13, 27, 42, 0.4), 0 0 0 1px rgba(13, 27, 42, 0.06);
    }
    body.admin-bar.hdr-layout-rail #dash-header.hdr-surface-pill { top: 46px; }
    body.hdr-layout-rail:has(#dash-header.hdr-surface-pill) { padding-left: calc(var(--hdr-rail-w) + 14px); }
    body.hdr-layout-rail #dash-header.hdr-surface-pill > .container {
        width: var(--hdr-rail-open);
        margin: 0;
        padding: 1.25rem 0.85rem;
        background: none;
        box-shadow: none;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Hamburger layouts (Overlay, Showcase): the header button sits beside the
   hamburger instead of floating in the middle of the bar. */
@media (min-width: 1025px) {
    #dash-header.header-overlay-mode .header-cta { margin-left: auto; }
}

/* ---- Two-row: logo and actions on top, the menu on a full-width strip --- */
@media (min-width: 1025px) {
    #dash-header.header-layout-tworow .header-inner { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
    #dash-header.header-layout-tworow .site-logo { order: 1; }
    #dash-header.header-layout-tworow .header-widgets { order: 2; }
    #dash-header.header-layout-tworow #header-right-nav { order: 3; margin-left: auto; }
    #dash-header.header-layout-tworow .header-cta { order: 4; }
    #dash-header.header-layout-tworow:not(:has(#header-right-nav)) .header-cta { margin-left: auto; }
    #dash-header.header-layout-tworow .menu-toggle { order: 5; }
    #dash-header.header-layout-tworow #primary-nav {
        order: 10;
        flex: 1 0 100%;
        position: relative;
        isolation: isolate;
        min-height: 54px;
        margin-top: 14px;
        /* The strip is dark, so the menu text flips to light on it. */
        --dash-hdr-fg: var(--hdr-strip-fg, #ffffff);
        --dash-hdr-fg-hover: var(--hdr-strip-fg-hover, var(--dash-secondary, #00c8a0));
        --hdr-accent: var(--dash-hdr-fg-hover);
    }
    #dash-header.header-layout-tworow #primary-nav::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        z-index: -2;
        background: var(--hdr-strip-bg, var(--dash-dark, #0d1b2a));
    }
    #dash-header.header-layout-tworow .primary-nav { height: 54px; }
}

/* ---- Showcase: hamburger at every size, a big split-screen menu --------- */
.mobile-nav.mobile-nav--showcase {
    transform: none;
    background: var(--dash-dark, #0d1b2a);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 110px 6vw 60px;
    max-height: none;
    top: 0;
    transition: opacity .4s ease, visibility 0s linear .5s;
}
.mobile-nav.mobile-nav--showcase.active { transition-delay: 0s; }
.mobile-nav--showcase > ul.mnav-showcase-list { counter-reset: mshow; max-width: 720px; margin: 0; position: relative; z-index: 1; }
.mobile-nav--showcase > ul.mnav-showcase-list > li {
    counter-increment: mshow;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.mobile-nav--showcase.active > ul.mnav-showcase-list > li { opacity: 1; transform: none; }
.mobile-nav--showcase.active > ul > li:nth-child(1) { transition-delay: .10s; }
.mobile-nav--showcase.active > ul > li:nth-child(2) { transition-delay: .16s; }
.mobile-nav--showcase.active > ul > li:nth-child(3) { transition-delay: .22s; }
.mobile-nav--showcase.active > ul > li:nth-child(4) { transition-delay: .28s; }
.mobile-nav--showcase.active > ul > li:nth-child(5) { transition-delay: .34s; }
.mobile-nav--showcase.active > ul > li:nth-child(6) { transition-delay: .40s; }
.mobile-nav--showcase.active > ul > li:nth-child(n+7) { transition-delay: .46s; }
.mobile-nav--showcase > ul.mnav-showcase-list > li > a {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    padding: 0.35rem 0;
    border: 0;
    font-size: clamp(2.2rem, 5.5vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: #fff;
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), color .3s ease;
}
.mobile-nav--showcase > ul.mnav-showcase-list > li > a::before {
    content: counter(mshow, decimal-leading-zero);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--dash-secondary, #00c8a0);
}
/* Hovering one link fades the others and slides it forward. */
.mobile-nav--showcase > ul.mnav-showcase-list:hover > li > a { opacity: 0.28; }
.mobile-nav--showcase > ul.mnav-showcase-list > li:hover > a { opacity: 1; transform: translateX(14px); color: #fff; padding-left: 0; }
.mobile-nav--showcase > ul.mnav-showcase-list .sub-menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; padding: 0 0 0.6rem 2.6rem; }
.mobile-nav--showcase > ul.mnav-showcase-list .sub-menu li a { border: 0; padding: 0.2rem 0; font-size: 0.95rem; }
/* The secondary menu and the CTA stay in the left column, above the image. */
.mobile-nav--showcase > :not(.mnav-showcase-preview):not(.mnav-showcase-list) { position: relative; z-index: 1; max-width: 520px; margin-left: 0; }
.mobile-nav--showcase .btn { width: auto !important; }
.mnav-showcase-preview { display: none; }
@media (min-width: 900px) {
    .mnav-showcase-preview {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40vw;
        background: var(--mnav-img, none) center / cover no-repeat;
        opacity: 0;
        transform: scale(1.08);
        clip-path: inset(0 0 0 100%);
        transition: opacity .5s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1), clip-path .7s cubic-bezier(.7, 0, .2, 1);
    }
    .mnav-showcase-preview.is-on { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
/* The header sits over the dark menu while it is open. */
body.nav-open #dash-header.header-layout-showcase {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    --dash-hdr-fg: #ffffff;
    --dash-hdr-fg-hover: #ffffff;
}
body.nav-open #dash-header.header-layout-showcase .header-cta { visibility: hidden; }

/* ---- Command palette: the menu is a searchable popup -------------------- */
.hdr-cmd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.55rem 0.7rem 0.55rem 0.95rem;
    border: 1px solid var(--hdr-rule);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dash-hdr-fg) 5%, transparent);
    color: var(--dash-hdr-fg);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .3s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.hdr-cmd-trigger:hover { border-color: var(--hdr-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hdr-accent) 16%, transparent); transform: translateY(-1px); }
.hdr-cmd-trigger-text { opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-cmd-kbd, .hdr-cmd kbd {
    font: 600 0.7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--hdr-rule);
    background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (min-width: 1025px) {
    #dash-header.header-layout-command #primary-nav,
    #dash-header.header-layout-command #header-right-nav { display: none; }
    #dash-header.header-layout-command .hdr-cmd-trigger { margin: 0 auto; width: min(420px, 40vw); }
    #dash-header.header-layout-command .hdr-cmd-kbd { margin-left: auto; }
}
@media (max-width: 1024px) {
    .hdr-cmd-trigger { margin-left: auto; padding: 0.55rem 0.7rem; }
    .hdr-cmd-trigger-text, .hdr-cmd-kbd { display: none; }
}
.hdr-cmd {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(8, 14, 24, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s ease;
}
.hdr-cmd[hidden] { display: none; }
.hdr-cmd.is-open { opacity: 1; }
.hdr-cmd-box {
    width: min(640px, 100%);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    color: #0d1b2a;
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(13, 27, 42, 0.08);
    transform: translateY(-10px) scale(0.97);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.2);
}
.hdr-cmd.is-open .hdr-cmd-box { transform: none; }
.hdr-cmd-search { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
.hdr-cmd-search i { color: #6b7280; }
.hdr-cmd-input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.1rem; color: inherit; }
.hdr-cmd-list { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; }
.hdr-cmd-list li { margin: 0; }
.hdr-cmd-list a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}
.hdr-cmd-list a i { width: 1.25rem; text-align: center; color: #6b7280; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), color .2s ease; }
.hdr-cmd-list a .hdr-cmd-parent { margin-left: auto; font-size: 0.78rem; color: #6b7280; }
.hdr-cmd-list a mark { background: color-mix(in srgb, var(--dash-primary, #0a66c2) 18%, transparent); color: inherit; border-radius: 3px; }
.hdr-cmd-list a.is-active { background: color-mix(in srgb, var(--dash-primary, #0a66c2) 10%, transparent); }
.hdr-cmd-list a.is-active i { color: var(--dash-primary, #0a66c2); transform: scale(1.2); }
.hdr-cmd-empty { margin: 0; padding: 1.25rem; color: #6b7280; text-align: center; }
.hdr-cmd-hint { display: flex; gap: 1.25rem; padding: 0.65rem 1.25rem; border-top: 1px solid #e5e7eb; font-size: 0.75rem; color: #6b7280; }
.hdr-cmd-hint kbd { margin-right: 0.15rem; }

/* ---- Motion link styles ------------------------------------------------- */
/* Magnetic: the label is pulled toward the pointer (main.js). */
#dash-header.hdr-links-magnetic .primary-nav > li > a .nav-label { transition: transform .45s cubic-bezier(.2, .8, .2, 1), color .2s ease; will-change: transform; }
#dash-header.hdr-links-magnetic .primary-nav > li > a.is-magnet .nav-label { transition: transform .12s linear; }
#dash-header.hdr-links-magnetic .primary-nav > li:is(:hover, .current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }

/* Spotlight: a soft light follows the pointer across the menu (main.js). */
/* On the list, not the <nav>: the Center layout positions the <nav> itself. */
#dash-header.hdr-links-spotlight .primary-nav { position: relative; isolation: isolate; }
#dash-header.hdr-links-spotlight .primary-nav::before {
    content: '';
    position: absolute;
    inset: -12px -24px;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    background: radial-gradient(110px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--hdr-accent) 26%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease;
}
#dash-header.hdr-links-spotlight .primary-nav:hover::before { opacity: 1; }
#dash-header.hdr-links-spotlight .primary-nav > li:is(:hover, .current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }

/* Wave: the letters hop one after another (main.js splits them). */
#dash-header.hdr-links-wave .primary-nav .nav-ch { display: inline-block; white-space: pre; }
#dash-header.hdr-links-wave .primary-nav > li:is(:hover, :focus-within) > a .nav-ch { animation: hdr-wave .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 32ms); }
#dash-header.hdr-links-wave .primary-nav > li:is(:hover, .current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }
@keyframes hdr-wave { 0% { transform: none; } 40% { transform: translateY(-7px) rotate(-4deg); } 100% { transform: none; } }

/* Scramble: the word decodes itself from random characters (main.js). */
#dash-header.hdr-links-scramble .primary-nav > li > a { font-variant-numeric: tabular-nums; }
#dash-header.hdr-links-scramble .primary-nav > li:is(:hover, .current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }
#dash-header.hdr-links-scramble .primary-nav .nav-label-in.is-scrambling { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -0.02em; }

/* Gradient sweep: the text fills with a moving brand gradient. */
#dash-header.hdr-links-gradient .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label-in {
    background: linear-gradient(90deg, var(--dash-primary, #0a66c2), var(--dash-secondary, #00c8a0), #a855f7, var(--dash-primary, #0a66c2));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hdr-gradient 2.4s linear infinite;
}
@keyframes hdr-gradient { to { background-position: 300% 0; } }

/* Glitch: an RGB-split copy tears across the word. */
#dash-header.hdr-links-glitch .primary-nav > li > a .nav-label-in { position: relative; }
#dash-header.hdr-links-glitch .primary-nav > li > a .nav-label-in::before,
#dash-header.hdr-links-glitch .primary-nav > li > a .nav-label-in::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
}
#dash-header.hdr-links-glitch .primary-nav > li:is(:hover, :focus-within) > a .nav-label-in::before { opacity: 0.85; color: #00e5ff; animation: hdr-glitch-a .5s steps(2, end) infinite; }
#dash-header.hdr-links-glitch .primary-nav > li:is(:hover, :focus-within) > a .nav-label-in::after  { opacity: 0.85; color: #ff2d75; animation: hdr-glitch-b .6s steps(2, end) infinite; }
#dash-header.hdr-links-glitch .primary-nav > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }
@keyframes hdr-glitch-a {
    0%   { clip-path: inset(0 0 60% 0); transform: translate(-2px, -1px); }
    50%  { clip-path: inset(40% 0 20% 0); transform: translate(2px, 1px); }
    100% { clip-path: inset(70% 0 0 0); transform: translate(-1px, 0); }
}
@keyframes hdr-glitch-b {
    0%   { clip-path: inset(55% 0 0 0); transform: translate(2px, 1px); }
    50%  { clip-path: inset(0 0 70% 0); transform: translate(-2px, 0); }
    100% { clip-path: inset(30% 0 40% 0); transform: translate(1px, -1px); }
}

/* Neon: the word flickers on and glows. */
#dash-header.hdr-links-neon .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a {
    color: var(--hdr-accent) !important;
    text-shadow: 0 0 4px color-mix(in srgb, var(--hdr-accent) 70%, transparent), 0 0 14px color-mix(in srgb, var(--hdr-accent) 55%, transparent), 0 0 30px color-mix(in srgb, var(--hdr-accent) 35%, transparent);
}
#dash-header.hdr-links-neon .primary-nav > li:is(:hover, :focus-within) > a { animation: hdr-neon .6s steps(1, end) 1; }
@keyframes hdr-neon { 0%, 18%, 30%, 55% { opacity: 1; } 12%, 24%, 45% { opacity: 0.35; } }

/* 3D flip: the word turns over like a cube to show a colored copy. */
#dash-header.hdr-links-flip .primary-nav > li > a .nav-label { perspective: 400px; }
#dash-header.hdr-links-flip .primary-nav > li > a .nav-label-in {
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -0.6em;
    transition: transform .55s cubic-bezier(.3, 1.4, .5, 1);
}
#dash-header.hdr-links-flip .primary-nav > li > a .nav-label-in::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    color: var(--hdr-accent);
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    backface-visibility: hidden;
}
#dash-header.hdr-links-flip .primary-nav > li:is(:hover, :focus-within) > a .nav-label-in { transform: rotateX(90deg); }
#dash-header.hdr-links-flip .primary-nav > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }

/* Marker: a highlighter swipe behind the word. */
#dash-header.hdr-links-marker .primary-nav > li > a .nav-label { isolation: isolate; }
#dash-header.hdr-links-marker .primary-nav > li > a .nav-label::before {
    content: '';
    position: absolute;
    left: -0.3em;
    right: -0.3em;
    bottom: 0.05em;
    height: 0.62em;
    z-index: -1;
    border-radius: 3px;
    background: color-mix(in srgb, var(--dash-secondary, #00c8a0) 55%, transparent);
    transform: scaleX(0) skewX(-12deg) rotate(-2deg);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
#dash-header.hdr-links-marker .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::before { transform: scaleX(1) skewX(-12deg) rotate(-2deg); }

/* Border draw: a frame traces itself around the link. */
#dash-header.hdr-links-draw .primary-nav > li > a .nav-label::before,
#dash-header.hdr-links-draw .primary-nav > li > a .nav-label::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
    pointer-events: none;
}
#dash-header.hdr-links-draw .primary-nav > li > a .nav-label::before { top: -8px; left: -12px; }
#dash-header.hdr-links-draw .primary-nav > li > a .nav-label::after  { bottom: -8px; right: -12px; }
#dash-header.hdr-links-draw .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::before {
    width: calc(100% + 24px);
    height: calc(100% + 16px);
    border-top-color: var(--hdr-accent);
    border-right-color: var(--hdr-accent);
    transition: width .2s ease-out, height .2s ease-out .2s;
}
#dash-header.hdr-links-draw .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::after {
    width: calc(100% + 24px);
    height: calc(100% + 16px);
    border-bottom-color: var(--hdr-accent);
    border-left-color: var(--hdr-accent);
    transition: border-color 0s ease-out .4s, width .2s ease-out .4s, height .2s ease-out .6s;
}

/* Squiggle: a wavy underline draws in and keeps flowing. A scaleX reveal
   (not clip-path) so it transitions the same reliable way every other
   link style's reveal does; clip-path combined with a CSS mask AND a
   conditionally-added animation on the same pseudo-element never actually
   engaged in testing (the squiggle sat fully visible and static instead
   of hidden-until-hover), a known-risky combination across browsers. */
#dash-header.hdr-links-squiggle .primary-nav > li > a .nav-label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 6px;
    background: var(--hdr-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6' viewBox='0 0 20 6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 20px 6px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6' viewBox='0 0 20 6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 20px 6px repeat-x;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
#dash-header.hdr-links-squiggle .primary-nav > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > a .nav-label::after {
    transform: scaleX(1);
    animation: hdr-squiggle .8s linear infinite;
}
@keyframes hdr-squiggle { to { -webkit-mask-position: 20px 0; mask-position: 20px 0; } }

/* Shine: a band of light sweeps across the word. */
#dash-header.hdr-links-shine .primary-nav > li:is(:hover, :focus-within) > a .nav-label-in {
    background: linear-gradient(110deg, var(--dash-hdr-fg) 35%, color-mix(in srgb, var(--hdr-accent) 60%, #fff) 50%, var(--dash-hdr-fg) 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hdr-shine 1.1s ease-in-out infinite;
}
#dash-header.hdr-links-shine .primary-nav > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--hdr-accent) !important; }
@keyframes hdr-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }