@font-face {
    font-family: 'Core Rhino 55';
    src: url('/fonts/CoreRhino55Medium.woff2') format('woff2'),
        url('/fonts/CoreRhino55Medium.woff') format('woff'),
        url('/fonts/CoreRhino55Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Core Rhino 45';
    src: url('/fonts/CoreRhino45Regular.woff2') format('woff2'),
        url('/fonts/CoreRhino45Regular.woff') format('woff'),
        url('/fonts/CoreRhino45Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html * {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
/* ---------- breadcrumb / footer fallback backgrounds (no photo uploaded yet) ---------- */
.rs-breadcrumb-bg { background-color: var(--rs-theme-blue); }
.rs-footer-area.has-theme-blue { background-color: var(--rs-title-primary); }
.rs-banner-bg-thumb { background-color: var(--rs-bg-primary); }

.rs-header-logo-wrapper { background-color: transparent !important; width: auto !important; height: auto !important; padding: 20px 0 20px 45px; }
.rs-header-logo img { height: 68px; width: auto; display: block; }
@media (max-width: 480px) {
    .rs-header-logo-wrapper { padding-left: 15px; }
    .rs-header-logo img { height: 52px; }
}

/* smaller nav labels; the dropdown arrow relied on a FontAwesome Pro glyph
   (not included in this build) and rendered as an invisible tofu box. */
.main-menu li a { font-size: 16px; }
.main-menu li.menu-item-has-children > a::after {
    content: '';
    font-family: initial;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-inline-start: 8px;
    margin-top: -4px;
}

.main-menu li a { text-transform: none; letter-spacing: normal; color: #4a4a4a; font-weight: bold; }
.main-menu li.active > a,
.main-menu li a.active {
    text-decoration: underline;
}

.rs-header-btn-contatti > a {
    display: inline-flex;
    align-items: center;
    background: var(--rs-theme-blue);
    color: var(--rs-white);
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.rs-header-btn-contatti > a:hover { background: var(--rs-title-primary); color: var(--rs-white); }
@media (max-width: 991.98px) {
    .rs-header-btn-contatti { display: none; }
}

@media (min-width: 992px) {
    .rs-header-hamburger { display: none; }
}

/* main.css hides several "-thumb" elements waiting for a scroll-reveal JS plugin
   (GSAP/ScrollTrigger) that this build intentionally does not include. Force visible. */
.rs-about-three .rs-about-thumb { visibility: visible !important; }

/* more vertical breathing room than the default section-space/rs-about-three padding */
.rs-about-area.rs-about-three {
    padding-top: 140px;
    padding-bottom: 140px;
}
@media (max-width: 991.98px) {
    .rs-about-area.rs-about-three { padding-top: 100px; padding-bottom: 100px; }
}
@media (max-width: 767.98px) {
    .rs-about-area.rs-about-three { padding-top: 90px; padding-bottom: 90px; }
}

/* "Chi siamo" home section title/subtitle row: same treatment as
   hero-slide-content's rs-banner-title/descrip (left accent bar included). */
.rs-about-three .rs-about-heading { margin-bottom: 40px; }
.rs-about-three .rs-about-heading-title {
    border-inline-start: 6px solid var(--rs-title-primary);
    margin-inline-start: -3px;
    padding-inline-start: 26px;
    font-size: 44px;
    text-transform: uppercase;
    color: var(--rs-title-primary);
    margin-bottom: 0;
}
.rs-about-three .rs-about-heading-subtitle {
    padding-top: 20px;
    border-inline-start: 3px solid var(--rs-title-primary);
    padding-inline-start: 26px;
    line-height: normal;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--rs-title-primary);
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .rs-about-three .rs-about-heading-title { font-size: 32px; }
}
@media (min-width: 992px) {
    .rs-about-three .rs-about-heading-title { font-size: 60px; }
}

/* "Chi siamo" home section: text (text1 title/subtitle + text2 body)
   on the left, photo on the right, with extra gap between them. */
.rs-about-three .rs-about-row .rs-about-thumb {
    margin-inline-start: 40px;
}
@media (max-width: 1199.98px) {
    .rs-about-three .rs-about-row .rs-about-thumb { margin-inline-start: 0; }
}
.rs-about-three .rs-about-thumb img {
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}
.rs-about-three .rs-about-tab-content h3 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--rs-title-primary);
    margin-bottom: 20px;
}
.rs-about-three .rs-about-tab-content h4 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--rs-theme-blue);
    margin: 24px 0 12px;
}
.rs-about-three .rs-about-tab-content p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--rs-text-primary);
    margin-bottom: 16px;
}
.rs-about-three .rs-about-tab-content p:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) {
    .rs-about-three .rs-about-tab-content h3 { font-size: 28px; }
}
@media (min-width: 992px) {
    /* scoped to .rs-about-row (only present on home's "Chi siamo" markup) so
       this doesn't leak into about.php/product pages sharing .rs-about-three */
    .rs-about-three .rs-about-row .rs-about-tab-content {
        column-count: 2;
        column-gap: 40px;
    }
    .rs-about-three .rs-about-row .rs-about-tab-content h3,
    .rs-about-three .rs-about-row .rs-about-tab-content h4 {
        column-span: all;
    }
    /* about.php "La nostra storia" main text: 2 columns on desktop too */
    .rs-about-three .rs-about-tab-content-cols {
        column-count: 2;
        column-gap: 40px;
    }
    .rs-about-three .rs-about-tab-content-cols h3,
    .rs-about-three .rs-about-tab-content-cols h4 {
        column-span: all;
    }
    /* about.php "I nostri valori": only the list goes 2-column, not the whole text */
    .rs-about-three .rs-about-tab-content-list-cols ul,
    .rs-about-three .rs-about-tab-content-list-cols ol {
        column-count: 2;
        column-gap: 40px;
    }
}

/* about.php: extra gap between the left image and the right text column
   (image is first in the DOM, text second, in both "La nostra storia" and
   "I nostri valori" blocks). Excludes .rs-about-row (home's "Chi siamo"),
   where the text column is on the LEFT and already has its own spacing
   rule applied to the thumb on the right instead. */
.rs-about-three .row:not(.rs-about-row) .rs-about-content-wrapper { margin-inline-start: 40px; }
@media (max-width: 1199.98px) {
    .rs-about-three .row:not(.rs-about-row) .rs-about-content-wrapper { margin-inline-start: 0; }
}

/* ---------- CMS rich-text lists: bare ul/ol inside body copy get custom
   markers (dot / numbered badge) instead of plain browser bullets/numbers.
   Scoped to the known rich-text wrappers (.rs-about-tab-content is already
   used for "Chi siamo"/about/product/category copy; .rs-rich-text is added
   in templates that echo raw CMS text with no dedicated content class). ---------- */
.rs-about-tab-content ul,
.rs-about-tab-content ol,
.rs-rich-text ul,
.rs-rich-text ol {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.rs-about-tab-content ul li,
.rs-rich-text ul li {
    position: relative;
    padding-inline-start: 18px;
    margin-bottom: 10px;
    line-height: 1.5;
    font-size: 15px;
    font-weight: 600;
    color: var(--rs-title-primary);
}
.rs-about-tab-content ul li::before,
.rs-rich-text ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rs-title-primary);
}
.rs-about-tab-content ol,
.rs-rich-text ol {
    counter-reset: rs-list-counter;
}
.rs-about-tab-content ol li,
.rs-rich-text ol li {
    position: relative;
    padding-inline-start: 34px;
    margin-bottom: 10px;
    line-height: 1.6;
    counter-increment: rs-list-counter;
}
.rs-about-tab-content ol li::before,
.rs-rich-text ol li::before {
    content: counter(rs-list-counter);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rs-title-primary);
    color: var(--rs-white);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rs-about-tab-content li:last-child,
.rs-rich-text li:last-child { margin-bottom: 0; }

/* main.css hides every native checkbox to draw a custom one via label::before/::after using
   FontAwesome Pro glyphs (not included in this build) — restore Bootstrap's own
   checkbox rendering (form-check-input already has its own accessible styling).
   The generic `input[type=checkbox] ~ label` selector still matched Bootstrap's
   .form-check-input too (e.g. the GDPR switch): its ::after drew an extra empty
   18x18 bordered box behind the label and forced 30px of left padding on it,
   fighting with the real switch pill sitting right next to it. Kill both
   pseudo-elements for form-check-input specifically, on top of the existing
   padding exclusion. */
input[type="checkbox"] { display: revert !important; }
input[type="checkbox"]:not(.form-check-input) ~ label { padding-inline-start: 0; }
input[type="checkbox"].form-check-input ~ label::before,
input[type="checkbox"].form-check-input ~ label::after {
    content: none !important;
    display: none !important;
}

/* ---------- rs-cta-area: space between title and button ---------- */
.rs-cta-area .rs-section-title { margin-bottom: 20px; }

/* ---------- rs-btn white-bg: readable on a colored section (CTA on brand bg) ---------- */
.rs-btn.white-bg { color: var(--rs-theme-blue); }
.rs-btn.white-bg .icon-box svg { fill: var(--rs-theme-blue); }
.rs-btn.white-bg:hover .icon-box svg { fill: var(--rs-white); }

/* home "vedi tutte le news" button: green text (instead of the default
   blue), right-aligned (lost when the section stopped being .rs-blog-one,
   which is what supplied that alignment), desktop only */
.rs-blog-btn .rs-btn.white-bg { color: var(--rs-title-primary); }
.rs-blog-btn .rs-btn.white-bg .icon-box svg { fill: var(--rs-title-primary); }
/* same specificity as vendor's own :hover rule but later in the stylesheet
   would otherwise still lose to our non-hover override above (tied
   specificity, and ours has no :hover to yield to) — restate it explicitly */
.rs-blog-btn .rs-btn.white-bg:hover { color: var(--rs-white); }
.rs-services-three .rs-blog-btn { display: flex; justify-content: flex-end; }
@media (max-width: 991.98px) {
    .rs-services-three .rs-blog-btn { display: none; }
}

/* ---------- rounded buttons site-wide ---------- */
.rs-btn { border-radius: 50px; }
.rs-square-btn { border-radius: 50%; }

/* ---------- rs-btn has-theme-blue has-icon has-bg: no arrow icon ---------- */
.rs-btn.has-theme-blue.has-icon.has-bg .icon-box { display: none; }

/* ---------- rs-cta-highlight: standalone CTA, made to stand out from
   surrounding blue sections/links (e.g. product page "richiedi informazioni")
   without changing the brand color ---------- */
.rs-btn.rs-cta-highlight {
    width: 100%;
    justify-content: space-between;
    padding-inline-end: 30px;
    font-size: 17px;
    background: #12315c;
    box-shadow: 0 10px 28px rgba(27, 70, 133, .35);
    transition: transform .25s ease, box-shadow .25s ease, background-color .3s linear;
}
.rs-btn.rs-cta-highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(27, 70, 133, .45);
}
.rs-btn.has-theme-blue.has-icon.has-bg.rs-cta-highlight .icon-box { display: inline-flex; }

/* ---------- product downloads: catalog links styled as pill buttons ---------- */
.rs-product-downloads-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    margin-bottom: 30px;
}
.rs-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 28px 10px 10px;
    border-radius: 50px;
    background: var(--rs-theme-blue);
    color: var(--rs-white);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(27, 70, 133, .6);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.rs-download-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    flex-shrink: 0;
}
.rs-download-btn-icon svg { width: 18px; height: 18px; }
.rs-download-btn:hover,
.rs-download-btn:focus-visible {
    color: var(--rs-white);
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -8px rgba(27, 70, 133, .7);
    filter: brightness(1.12);
}

/* ---------- header: single sticky bar (no duplicate clone) ---------- */
/* The blur/tint lives on a ::before, not on .rs-header-area itself: a
   backdrop-filter/filter on an element creates a new containing block for its
   OWN position:fixed descendants (spec behaviour) — and .main-menu (the mobile
   off-canvas nav) is nested inside this header. Putting the filter directly on
   .rs-header-area trapped the fixed nav panel inside the header's own ~90px
   box, corrupting its rendering past that height. Keeping filter off the
   ancestor lets .main-menu use the viewport as its containing block again. */
.rs-header-area.rs-header-one {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    border-radius: 0 0 32px 32px;
    transition: box-shadow .3s ease;
    isolation: isolate;
}
/* fixed opacity (not scroll-dependent) so the header looks the same on every
   page: internal pages have no hero photo behind it at load, so the lower
   "top of page" opacity used to make it look flat/plain there vs. home. */
.rs-header-area.rs-header-one::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: inherit;
    transition: background .3s ease;
}
.rs-header-area.rs-header-one.is-stuck {
    box-shadow: 0 6px 25px rgba(0, 0, 0, .08);
}
body { padding-top: 108px; }

/* fancybox.css is injected into <head> at runtime (loadRequiredJavascriptForComponents),
   so it always ends up AFTER this stylesheet and its z-index:var(--fancybox-zIndex,1050)
   would win on source order alone even if we tried to out-specificity it here. Setting the
   custom property instead works regardless of load order, since .fancybox__container just
   inherits whatever value is cascaded down from :root — and 1070 clears both the sticky
   header (z-index:1060 above) and the mobile full-screen menu (z-index:1050). */
:root { --fancybox-zIndex: 1070; }

/* ---------- mobile nav: full-screen takeover (no partial-width side panel) ---------- */
/* A 300px-wide fixed side panel over other fixed/transformed siblings (header,
   hero) was inconsistently failing to paint its own background on real
   devices no matter which CSS technique was used (opaque bg, redundant
   top+bottom sizing, forced GPU layer, decoupled ::before layer) — a
   compositing issue tied to the layered fixed-position stacking on this page,
   not something fixable from the panel's own rules. A full-screen takeover
   removes the need for a separate backdrop/partial overlay entirely and has
   a single, simple fixed layer instead. */
@media (max-width: 991.98px) {
    .main-menu {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        background-color: #ffffff !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding: 100px 30px 30px !important;
        padding-inline-start: 30px !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease;
        overflow-y: auto;
        z-index: 1050;
    }
    .main-menu.is-open { opacity: 1; visibility: visible; }

    /* the hamburger/close toggle is a DOM sibling of .main-menu inside the same
       isolated stacking context (.rs-header-area{isolation:isolate}); without its
       own z-index above 1050 the full-screen menu paints over it and swallows clicks. */
    .rs-header-hamburger { position: relative; z-index: 1060; margin-inline-end: 14px; }
    .main-menu .multipage-menu { flex-direction: column; align-items: stretch; }
    .main-menu .multipage-menu > li > a { padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.08); display: flex; justify-content: space-between; font-size: 20px; }
    /* main.css's desktop hover-dropdown rule (.main-menu .submenu) sets
       transform:scaleY(0) for the closed state; overriding opacity/visibility
       alone left that transform in place, so toggling display:block still
       rendered the submenu scaled to zero height. */
    .main-menu .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        min-width: 0;
        background: transparent;
        display: none;
        padding-left: 15px;
        transform: none !important;
        transition: none;
        pointer-events: auto;
    }
    .main-menu .menu-item-has-children.is-open > .submenu { display: block; }

    .rs-header-hamburger .bar-icon .icon-close { display: none; }
    .rs-header-hamburger.is-open .bar-icon .icon-open { display: none; }
    .rs-header-hamburger.is-open .bar-icon .icon-close { display: block; }

    body.nav-open { overflow: hidden; }
}

/* ---------- back to top ---------- */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--rs-theme-blue);
    color: var(--rs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s ease;
    z-index: 998;
    border: none;
    cursor: pointer;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- legal bar: GDPR + deltacommerce ---------- */
.legal-bar { background: #000; padding: 8px 0 20px; }
/* the widget's own markup/inline styles come from a remote script (CookiesManager
   iframe lib) we don't control, so centering the outer container alone isn't
   enough when its child (#cookies_preferences_wrapper) or that wrapper's own
   item divs render as full-width blocks — force flex + centering with
   !important down through both levels. */
.legal-bar #cookies-manager-list-of-choices-made,
.legal-bar #cookies-manager-list-of-choices-made #cookies_preferences_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    width: 100% !important;
    margin: auto !important;
}
.legal-bar #cookies-manager-list-of-choices-made #cookies_preferences_wrapper div {
    display: inline-flex !important;
    width: auto !important;
    float: none !important;
}
.legal-bar .dc-logo { display: flex; justify-content: center; padding-top: 10px; }

/* ---------- hero slider (home) ---------- */
/* bleeds up under the fixed, blurred header so the header's glass effect shows
   over the top of the hero photo instead of a flat white gap. */
.hero-slider { padding: 0; background: var(--rs-bg-primary); position: relative; margin-top: -108px; }
.hero-slides { position: relative; min-height: 827px; }
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(241,241,240,.96) 0%, rgba(241,241,240,.72) 45%, rgba(241,241,240,.25) 100%);
}
.hero-slide .container { position: relative; z-index: 1; padding-top: 150px; padding-bottom: 60px; }
.hero-slide .hero-slide-content { max-width: 580px; }
/* left accent bar: thick next to the title, thinner next to the paragraph,
   both sharing the same inner edge (title's extra thickness bleeds further
   left via the negative margin, text stays flush) — matches the reference
   screenshot pixel-for-pixel (9px/4px bars, common right edge, ~44px gap to text). */
.hero-slide-content .rs-banner-title {
    border-inline-start: 6px solid var(--rs-title-primary);
    margin-inline-start: -3px;
    padding-inline-start: 26px;
    font-size: 44px;
    text-transform: uppercase;
}
.hero-slide-content .descrip {
    padding-top: 20px;
    border-inline-start: 3px solid var(--rs-title-primary);
    padding-inline-start: 26px;
    line-height: normal;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--rs-title-primary);
}
@media (max-width: 767.98px) {
    .hero-slide-content .rs-banner-title { font-size: 32px; }
}
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50px;
    background: var(--rs-white);
    border: 1px solid rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    color: var(--rs-theme-blue);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}
.hero-arrow:hover { background: var(--rs-theme-blue); color: var(--rs-white); }
.hero-arrow-prev { left: 20px; }
.hero-arrow-prev svg { transform: rotate(180deg); }
.hero-arrow-next { right: 20px; }
.hero-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(33,86,70,.25); border: none; cursor: pointer; padding: 0; }
.hero-dot.is-active { background: var(--rs-theme-blue); }
@media (max-width: 767.98px) {
    .hero-arrow { display: none; }
    .hero-slides { min-height: 693px; }
}

/* ---------- internal pages: no breadcrumb banner — a plain page heading
   (h1 + optional subtitle) sits above the first content block instead. ---------- */
.rs-page-heading { padding-top: 90px; padding-bottom: 30px; }
/* extra breathing room when a full-bleed header thumb (not the fixed nav)
   sits directly above this heading — about.php only */
.rs-page-heading-after-thumb { padding-top: 140px; }

/* about.php: pull the header thumb up so its top portion rides behind the
   fixed, blurred header instead of starting in a flat gap right below it
   (same idea as .hero-slider on the homepage, just a partial overlap since
   this is a plain image with no content to reposition inside it). */
.thumb { margin-top: -60px; }

/* news.php: h1/h2 heading in one column, intro text in the other, side by
   side in the same row — padding moves to the row so both columns align. */
.rs-news-heading-row {
    padding-top: 90px;
    padding-bottom: 30px;
}
.rs-news-heading-row .rs-page-heading { padding-top: 0; padding-bottom: 0; }
@media (max-width: 767.98px) {
    .rs-news-heading-row { padding-top: 70px; }
}

/* more breathing room before the news listing below (overrides the global
   -48px stacked-card overlap for just this junction) */
.rs-services-area.rs-news-listing { margin-top: 60px !important; }

/* news listing previews: square thumbs (image never cropped, letterboxed on
   a white backdrop) and a smaller publish date */
.rs-news-listing .rs-services-thumb {
    aspect-ratio: 1 / 1;
    background: var(--rs-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rs-news-listing .rs-services-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* news thumbs have no .rs-services-thumb-title overlaid on the image (the
   title sits below, in .rs-services-content) — the dark gradient from
   .rs-services-three .rs-services-thumb::after exists only to keep that
   overlaid title readable, so it's just a dark cast on this one */
.rs-news-listing .rs-services-thumb::after { display: none; }
/* same reasoning as .rs-news-listing above: the related-news carousel on the
   product page has no title overlaid on the image either */
.rs-news-carousel .rs-services-thumb::after { display: none; }
.rs-news-listing .rs-blog-meta { margin-bottom: 6px; }
.rs-news-listing .rs-blog-meta-item span {
    font-size: 12px;
    text-transform: uppercase;
    color: #8a8a8a;
}
.rs-news-listing .rs-services-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start !important;
}

/* news-detail.php: attachment list — plain bordered rows instead of the
   mismatched .rs-footer-widget-links (that class expects to wrap a nested
   <ul>, but the markup put it directly on the <ul>, so its selectors never
   matched and links rendered completely unstyled). */
.rs-news-files ul {
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 12px;
    overflow: hidden;
}
.rs-news-files li:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.rs-news-files li a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: var(--rs-text-primary);
    font-weight: 600;
}
.rs-news-files li a:hover { color: var(--rs-title-primary); background: rgba(0, 0, 0, .02); }

/* the global -48px stacked-card overlap pulled this image up over the
   heading's h2 below it (heading only has 30px of bottom padding) */
.rs-news-detail-image { margin-top: 50px !important; }
.rs-news-detail-image img { box-shadow: 0 20px 50px rgba(0, 0, 0, .12); }

/* news-detail.php: prev/next article arrows next to the h1/h2 heading */
.rs-news-detail-nav { display: flex; gap: 10px; }
.rs-news-detail-nav-btn {
    width: 46px;
    height: 46px;
    border-radius: 50px;
    background: var(--rs-white);
    border: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rs-theme-blue);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.rs-news-detail-nav-btn.is-prev svg { transform: rotate(180deg); }
.rs-news-detail-nav-btn:hover { background: var(--rs-theme-blue); color: var(--rs-white); }
.rs-news-detail-nav-btn.is-disabled {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}
@media (max-width: 767.98px) {
    .rs-news-detail-nav { display: none; }
}
.rs-page-heading-eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rs-text-secondary);
    margin-bottom: 10px;
}
/* same treatment as hero-slide-content's rs-banner-title/descrip (left accent bar included) */
.rs-page-heading-title {
    border-inline-start: 6px solid var(--rs-title-primary);
    margin-inline-start: -3px;
    padding-inline-start: 26px;
    font-size: 44px;
    text-transform: uppercase;
    margin-bottom: 0;
}
.rs-page-heading .descrip {
    padding-top: 20px;
    border-inline-start: 3px solid var(--rs-title-primary);
    padding-inline-start: 26px;
    line-height: normal;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--rs-title-primary);
}
@media (max-width: 767.98px) {
    .rs-page-heading { padding-top: 70px; }
    .rs-page-heading-title { font-size: 32px; }
    .rs-page-heading-after-thumb { padding-top: 100px; }
}
@media (min-width: 992px) {
    .rs-page-heading.section-space-top .rs-page-heading-title { font-size: 60px; }
    .rs-page-heading.section-space-top .descrip { font-size: 20px; }
}

/* breadcrumb nav above the page heading: small, muted, left-aligned trail */
.rs-breadcrumb-nav { margin-bottom: 16px; }
.rs-breadcrumb-nav .breadcrumb {
    margin-bottom: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.rs-breadcrumb-nav .breadcrumb-item {
    color: var(--rs-text-primary);
    padding: 3px 10px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 999px;
}
.rs-breadcrumb-nav .breadcrumb-item a { color: var(--rs-text-primary); }
.rs-breadcrumb-nav .breadcrumb-item a:hover { color: var(--rs-title-primary); }
.rs-breadcrumb-nav .breadcrumb-item:last-child {
    color: var(--rs-title-primary);
    border-color: var(--rs-title-primary);
}
.rs-breadcrumb-nav .breadcrumb-item + .breadcrumb-item { padding-inline-start: 10px; }
.rs-breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before { display: none; }

/* product-model.php: on desktop the h1/h2 shouldn't stretch the full row width */
@media (min-width: 992px) {
    .rs-page-heading-model .rs-page-heading-title,
    .rs-page-heading-model .descrip {
        max-width: 900px;
    }
}

/* ---------- Contatti: no breadcrumb — page's own <h1> sits small/muted above
   the marketing eyebrow+headline so it doesn't compete visually with them. ---------- */
.rs-contact-one .rs-contact-page-title {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 10px;
}

/* ---------- Contatti: rs-contact-list — one row on desktop, modern cards ---------- */
/* vendor's has-theme-blue variant of .rs-contact-list-item/.rs-contact-icon
   span is one class more specific than the base rule, so it has to be
   targeted directly (same selector, later in the stylesheet) to win. */
.rs-contact-one .rs-contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 40px;
}
.rs-contact-one.has-theme-blue .rs-contact-list-item {
    flex: 1 1 200px;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 22px 20px;
    transition: background .25s ease, transform .25s ease;
}
@media (min-width: 992px) {
    .rs-contact-one .rs-contact-list { flex-wrap: nowrap; }
    .rs-contact-one.has-theme-blue .rs-contact-list-item { flex: 1 1 0; padding: 20px 16px; }
}
.rs-contact-one.has-theme-blue .rs-contact-list-item:hover {
    background: rgba(255, 255, 255, .1);
    transform: translateY(-3px);
}
.rs-contact-one.has-theme-blue .rs-contact-icon span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    background: var(--rs-white);
    color: var(--rs-title-primary);
}
.rs-contact-one.has-theme-blue .rs-contact-icon svg { width: 20px; height: 20px; }
.rs-contact-one.has-theme-blue .rs-contact-icon svg path { fill: var(--rs-title-primary); }
.rs-contact-one .rs-contact-list-content { width: 100%; }
.rs-contact-one .rs-contact-list-content span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 8px !important;
}
.rs-contact-one .rs-contact-list-content h6 {
    font-size: 15px;
    font-weight: 600;
    color: var(--rs-white);
    margin: 0;
    word-break: break-word;
}
@media (max-width: 575.98px) {
    .rs-contact-one.has-theme-blue .rs-contact-list-item { flex: 1 1 100%; }
}

/* vendor's rs-contact-form background (rgba(33, 86, 70, .3), a dark teal)
   blends with the section's blue background into a murky dark blue;
   replaced with the same glass-panel look used by .rs-contact-list-item. */
.rs-contact-one.has-theme-blue .rs-contact-form {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- contact form (fe() generated markup, styled to match rs-contact-input) ---------- */
.rs-contact-input .form-control,
.rs-contact-input textarea.form-control {
    width: 100%;
    /* bumped from 52px: `<input>` doesn't grow to fit padding the way a
       block element would (it just centers/clips text within whatever
       box it's given), so uniform 15px padding needed the floor raised
       explicitly to stop it cramming into the old height */
    min-height: 56px;
    outline: 0;
    /* !important: same `.rs-contact-one .rs-contact-input input` (vendor)
       conflict as border-radius below — its own `padding:0 25px` (one
       element selector more specific) was zeroing this back out. 15px on
       all sides, matching the textarea's own padding for consistency. */
    padding: 15px !important;
    color: var(--rs-white);
    /* Bootstrap's own `.form-control{font-size:1rem}` (0,1,0) otherwise wins
       over the vendor `input[type=...],textarea{font-size:16px}` base rule
       (a bare `textarea`/`input[type]` selector alone is only 0,1,1/0,0,1
       here) — and 1rem resolves to 10px because vendor/main.css sets
       html{font-size:10px} site-wide, so typed text rendered almost
       unreadably small */
    font-size: 16px;
    /* !important: `.rs-contact-one .rs-contact-input input` (vendor) is one
       element selector more specific than this rule and also sets 2px here */
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
}
/* !important: overrides the shared !important padding above (needed there
   only to beat the vendor rule) so the textarea keeps its own uniform 15px */
.rs-contact-input textarea.form-control { height: 115px; padding: 15px !important; resize: none; }
.rs-contact-input .form-control::placeholder { color: rgba(255, 255, 255, .7); }
.rs-contact-input .form-control:focus { outline: none; border-color: var(--rs-white); }
.rs-contact-input label:not(.form-check-label) { display: none; }
.rs-contact-form-check { color: rgba(255, 255, 255, .85); font-size: 14px; }
.rs-contact-form-check a { color: var(--rs-white); text-decoration: underline; }
.rs-contact-form-check .form-check-label { display: inline-block; color: rgba(255, 255, 255, .85); }
.rs-contact-form-check .invalid-feedback { color: var(--bs-form-invalid-color); flex-basis: 100%; margin: 0; font-size: 16px;}
/* `.rs-contact-one .rs-contact-input input` (vendor, meant for text fields)
   also matches this switch's real <input type="checkbox">: it forces
   width:100%/height:52px/padding/border-radius:2px and — worse — a shorthand
   `background` that wipes out Bootstrap's own knob-dot background-image.
   That's what was actually distorting it (a big blank rectangle, no knob),
   not just a contrast issue. Force the switch's own box model/imagery back
   with !important since the vendor rule outranks a plain class override. */
/* drop Bootstrap's padding-left/negative-margin switch-positioning trick —
   lay out the switch and its label as a plain flex row with a gap instead,
   so the switch sits flush left instead of indented. */
.rs-contact-form-check .form-check.form-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 0;
}
/* flex-wrap decides which line an item goes on using its un-shrunk preferred
   width — for the label that's the full one-line text, far wider than a
   mobile row, so the whole label (not just the overflow) dropped to a new
   line below the switch instead of wrapping next to it. flex-basis 0 (+
   min-width 0 so it can actually shrink past its content's min size) makes
   it start at zero width and grow to fill the row instead. */
.rs-contact-form-check .form-check.form-switch .form-check-label {
    flex: 1 1 0%;
    min-width: 0;
}
.rs-contact-input input[type="checkbox"].form-check-input {
    width: 2.75em !important;
    height: 1.375em !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none;
    flex-shrink: 0;
    border-radius: 2em !important;
    border: 1px solid rgba(255, 255, 255, .5) !important;
    background-color: rgba(255, 255, 255, .25) !important;
    background-image: var(--bs-form-switch-bg) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}
.rs-contact-input input[type="checkbox"].form-check-input:checked {
    background-color: var(--rs-theme-orange) !important;
    border-color: var(--rs-theme-orange) !important;
    background-position: right center !important;
}

/* submit: right-aligned with breathing room above */
.rs-contact-form-submit { margin-top: 20px; text-align: right; }

/* ---------- Contatti: Google Maps embed below the contact section ---------- */
.rs-map-area { line-height: 0; }
.rs-map-embed {
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}
@media (max-width: 767.98px) {
    .rs-map-embed { height: 320px; }
}

/* ---------- rs-services-three: category cards (home "La nostra gamma") ---------- */
/* whole card is now a rounded, elevated unit (24px, matching the site's card
   scale between the 48px section flaps and the 12px dropdown chrome); the
   title moves onto the image itself, bottom-left, over a gradient so it stays
   legible on any photo. */
.rs-services-three .rs-services-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rs-white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.rs-services-three .rs-services-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}
.rs-services-three .rs-services-thumb {
    position: relative;
    overflow: hidden;
    background: var(--rs-white);
}
.rs-services-three .rs-services-thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.rs-services-three .rs-services-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}
.rs-services-three .rs-services-thumb-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 22px;
}
.rs-services-three .rs-services-thumb-title .rs-services-title { margin: 0; }
.rs-services-three .rs-services-thumb-title .rs-services-title a {
    color: var(--rs-white);
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}
.rs-services-three .rs-services-content {
    padding: 16px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.rs-services-three .rs-services-content .descrip {
    color: var(--rs-theme-blue);
    font-size: 17px;
}
.rs-services-three .rs-services-item .descrip { margin: 0; }
.rs-services-three .rs-services-btn-wrapper { display: flex; justify-content: flex-end; }

/* ---------- rs-services-area.rs-services-three (category grid): dark green
   section so the white cards pop against it ---------- */
.rs-services-area.rs-services-three.has-theme-blue { background: var(--rs-title-primary) !important; }
.rs-services-area.rs-services-three.has-theme-blue .rs-section-title,
.rs-services-area.rs-services-three.has-theme-blue .rs-section-subtitle {
    color: var(--rs-white);
}

/* ---------- home "I nostri punti di forza": the 5 bullets on a single row, each with its own icon ---------- */
.rs-feature-area.has-bg-light-blue { background: #f1f2f0; padding-bottom: 60px; }
.rs-feature-area.has-bg-light-blue .rs-feature-item-row {
    background: none;
    padding: 0;
    box-shadow: none;
}
.rs-feature-item li strong { font-weight: bolder; color: var(--rs-title-primary); display: block; margin-bottom: 8px; }
.rs-feature-item-row h3 { text-align: center; margin-bottom: 40px; }
.rs-feature-item-row ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.rs-feature-item-row ol li {
    flex: 1 1 180px;
    max-width: 200px;
    text-align: center;
    padding: 30px 18px 24px;
    background: var(--rs-white);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
    font-size: 18px;
    color: var(--rs-text-primary);
}
.rs-feature-item-row ol li::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-color: var(--rs-title-primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}
/* 1 Produzione rapida: bolt | 2 Bassi costi di mantenimento: wallet |
   3 Bassi consumi energetici: leaf | 4 Facile da usare: smile | 5 Protezione per l'ambiente: shield */
.rs-feature-item-row ol li:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M13%202%204%2014h6l-1%208%209-12h-6z%22/%3E%3C/svg%3E");
}
.rs-feature-item-row ol li:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2213%22%20r%3D%221.5%22%20fill%3D%22white%22/%3E%3C/svg%3E");
}
.rs-feature-item-row ol li:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M20%205C11%205%205%2011%205%2020c9%200%2015-6%2015-15Z%22/%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20d%3D%22M6%2019%2019%206%22/%3E%3C/svg%3E");
}
.rs-feature-item-row ol li:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%221.2%22%20fill%3D%22white%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2210%22%20r%3D%221.2%22%20fill%3D%22white%22/%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22M8%2014c1.3%201.6%202.6%202.2%204%202.2s2.7-.6%204-2.2%22/%3E%3C/svg%3E");
}
.rs-feature-item-row ol li:nth-child(5)::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%203%2019%206v6c0%205-3%208-7%209-4-1-7-4-7-9V6Z%22/%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22m9%2012%202.2%202.2L15%2010%22/%3E%3C/svg%3E");
}
@media (max-width: 575.98px) {
    .rs-feature-item-row ol li { flex: 1 1 140px; }
}

/* ---------- home "Design e costruzione di alta qualità" / box3: full-width
   feature block, its bullet list rendered as individual cards (no more
   checkmark icon overlay). The light-blue box background becomes a plain
   light gray that spans the whole section, not just each item. ---------- */
/* more breathing room from the services section above (overrides the global
   -48px stacked-card overlap for just this junction) */
.rs-feature-area.rs-feature-two:not(.has-bg-light-blue) { margin-top: 60px !important; }
.rs-feature-area.rs-feature-two:not(.has-bg-light-blue) { background: #f1f2f0; }

/* "Design e costruzione di alta qualità" / "Questi sono i nostri valori":
   flush against the services section above it, no rounded-flap overlap. */
.rs-feature-area.rs-feature-design {
    border-radius: 0 !important;
    margin-top: 0 !important;
}
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item {
    background: none;
    padding: 0;
    box-shadow: none;
}
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item { margin-bottom: 40px; }
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item:last-child { margin-bottom: 0; }
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item ul,
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item ol {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item ul li,
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item ol li {
    flex: 1 1 240px;
    background: var(--rs-white);
    border-radius: 14px;
    border-top: 3px solid var(--rs-title-primary);
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    font-size: 15px;
    line-height: 1.5;
    color: var(--rs-text-primary);
    transition: transform .25s ease, box-shadow .25s ease;
}
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item ul li:hover,
.rs-feature-two:not(.has-bg-light-blue) .rs-feature-item ol li:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .1);
}
@media (max-width: 575.98px) {
    .rs-feature-two:not(.has-bg-light-blue) .rs-feature-item ul li,
    .rs-feature-two:not(.has-bg-light-blue) .rs-feature-item ol li { flex: 1 1 100%; }
}

/* box3 "Tecnologia all'avanguardia": its own dedicated section, wireframe.jpg
   as a plain framed visual next to the text (not blended, not a watermark).
   No section-wide background — the color/rounding lives on an inner box. */
.rs-feature-area.rs-feature-tech {
    background: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}
.rs-feature-tech-box {
    background: #f5f5f4;
    border-radius: 24px;
    padding: 60px 50px;
}
@media (max-width: 767.98px) {
    .rs-feature-tech-box { padding: 40px 25px; }
}
.rs-feature-tech-visual img { width: 100%; display: block; }
@media (min-width: 992px) {
    .rs-feature-tech .rs-feature-item {
        column-count: 2;
        column-gap: 30px;
    }
    .rs-feature-tech .rs-feature-item h1,
    .rs-feature-tech .rs-feature-item h2,
    .rs-feature-tech .rs-feature-item h3,
    .rs-feature-tech .rs-feature-item h4 {
        column-span: all;
    }
}

/* ---------- simple grid for services/blog items reused without swiper ---------- */
.rs-plain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 991.98px) { .rs-plain-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- section stacking: rounded top corners overlapping the section above (cerebrium.ai-style) ---------- */
/* every top-level block of a page (each card's own <section>/<div>) rides up
   over the bottom of the previous one via a negative margin, with rounded top
   corners so the overlap reads as a curved "flap" instead of a hard seam —
   visible wherever two consecutive sections differ in background color. */
main > section,
main > div {
    position: relative;
    border-radius: 48px 48px 0 0;
}
main > section:first-child,
main > div:first-child {
    border-radius: 0;
}
main > section:not(:first-child),
main > div:not(:first-child) {
    margin-top: -48px;
}
.site-footer { border-radius: 48px 48px 0 0; margin-top: -48px; }
@media (max-width: 767.98px) {
    main > section, main > div, .site-footer { border-radius: 28px 28px 0 0; }
    main > section:not(:first-child), main > div:not(:first-child), .site-footer { margin-top: -28px; }
}

/* ---------- footer: clean minimal grid (cerebrium.ai-inspired layout) ---------- */
/* replaces the vendor rs-footer-two widgets (whose "stroke text" decoration
   rendered its outline in the same color as the footer background — invisible
   ghosting, not fixable without dropping the component) with a plain,
   custom grid: brand block + link columns + a thin-divider bottom bar. */
.site-footer { position: relative; overflow: hidden; background: var(--rs-title-primary); padding: 90px 0 0; }
.site-footer > .container { position: relative; z-index: 1; }
/* decorative watermark: the brand mark, huge and faint, bleeding off the right edge */
.site-footer-bg-logo {
    position: absolute;
    top: 68%;
    right: -60px;
    transform: translateY(-50%);
    height: 620px;
    width: auto;
    opacity: .03;
    pointer-events: none;
    z-index: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.site-footer-top {
    display: grid;
    grid-template-columns: minmax(100px, 130px) minmax(0, 1.2fr) minmax(0, 2fr);
    gap: 40px;
    padding-bottom: 60px;
}
.site-footer-anniversary img { width: 100%; max-width: 110px; height: auto; display: block; }
.site-footer-claim {
    color: rgba(255, 255, 255, .75);
    font-size: 22px;
    text-transform: uppercase;
    line-height: 1.3;
    max-width: 320px;
    margin: 0;
    font-weight: bolder;
}
.site-footer-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}
.site-footer-social { display: flex; gap: 10px; margin-top: 28px; }
.site-footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: var(--rs-white);
    font-size: 16px;
    transition: background .25s ease;
}
.site-footer-social a:hover { background: rgba(255, 255, 255, .2); }
.site-footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.site-footer-heading {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.site-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.site-footer-list li { color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.5; }
.site-footer-list-cols {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: 24px;
    row-gap: 13px;
}
.site-footer-list a { color: rgba(255, 255, 255, .85); }
.site-footer-list a:hover { color: var(--rs-white); text-decoration: underline; }
.site-footer-meta li { color: rgba(255, 255, 255, .65); }
.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
}
.site-footer-copyright { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .6); }
.site-footer-sitemap { font-size: 14px; color: rgba(255, 255, 255, .6); }
.site-footer-sitemap:hover { color: var(--rs-white); text-decoration: underline; }
.site-footer-bottom-right { display: flex; align-items: center; gap: 28px; }

/* ---------- footer language switcher ---------- */
.site-lang-switcher-label { font-size: 14px; color: rgba(255, 255, 255, .6); }
.site-lang-switcher { position: relative; }
.site-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
}
.site-lang-toggle svg { transition: transform .2s ease; }
.site-lang-switcher.is-open .site-lang-toggle svg { transform: rotate(180deg); }
.site-lang-menu {
    list-style: none;
    margin: 0;
    padding: 8px;
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    min-width: 140px;
    background: var(--rs-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 10;
}
.site-lang-switcher.is-open .site-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-lang-menu li + li { margin-top: 2px; }
.site-lang-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--rs-text-primary);
}
.site-lang-menu a:hover { background: var(--rs-bg-primary); }
.site-lang-menu a.is-active { color: var(--rs-title-primary); font-weight: 700; }
@media (max-width: 991.98px) {
    /* anniversary logo + brand block stay side by side in their own row;
       the nav columns drop to a full-width row underneath */
    .site-footer-top { grid-template-columns: auto 1fr; gap: 40px 20px; padding-bottom: 40px; }
    .site-footer-nav { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .site-footer-bg-logo { height: 320px; }
    .site-footer-anniversary img { max-width: 100px; }
    /* no longer sharing a row with the nav columns that justified capping it
       at 320px — let it use the brand column's full width instead of
       sitting narrower than it, and shrink the text so it doesn't wrap into
       a tall multi-line block next to the much shorter logo */
    .site-footer-claim { max-width: none; font-size: 14px; }
}
@media (max-width: 575.98px) {
    .site-footer { padding-top: 60px; }
    .site-footer-nav { grid-template-columns: 1fr; }
    .site-footer-bottom { flex-direction: column; align-items: flex-start; }
    .site-lang-menu { right: auto; left: 0; }
    .site-footer-bg-logo { height: 220px; opacity: .04; }
}
@media (max-width: 575.98px) { .rs-plain-grid { grid-template-columns: 1fr; } }
@media (min-width: 992px) {
    .rs-rich-text-columns { column-count: 2; column-gap: 48px; }
}

/* product-model.php: image slideshow gallery over all images in the atom
   (mirrors the hero-slider stacked-slides pattern, boxed instead of full-bleed) */
.rs-product-gallery {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .12);
}
.rs-product-gallery-slides { position: relative; }
.rs-product-gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
}
.rs-product-gallery-slide.is-active { position: relative; opacity: 1; visibility: visible; z-index: 1; }
.rs-product-gallery-slide a { display: block; width: 100%; height: 100%; }
.rs-product-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-product-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rs-white);
    border: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    color: var(--rs-theme-blue);
}
.rs-product-gallery-arrow:hover { background: var(--rs-theme-blue); color: var(--rs-white); }
.rs-product-gallery-arrow-prev { left: 16px; }
.rs-product-gallery-arrow-prev svg { transform: rotate(180deg); }
.rs-product-gallery-arrow-next { right: 16px; }
.rs-product-gallery-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.rs-product-gallery-thumbs::-webkit-scrollbar { display: none; }
.rs-product-gallery-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid rgba(0, 0, 0, .15);
    cursor: pointer;
    opacity: .6;
    background: var(--rs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .2s ease, border-color .2s ease;
}
.rs-product-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rs-product-gallery-thumb:hover { opacity: 1; }
.rs-product-gallery-thumb.is-active { opacity: 1; border-color: var(--rs-theme-blue); }

/* product-model.php: "richiedi informazioni" form section — dark green
   band (like the site-wide CTA) with white input fields on top.
   Deliberately NOT reusing .rs-contact-input/.rs-contact-form-check: those
   carry dark-glass-theme rules built for contatti.php that fight this
   simpler design (hidden floating labels, translucent white borders,
   orange checked-state) — see lines ~779-834 above. Fresh classes here
   avoid inheriting any of that. */
.rs-product-request-form .rs-contact-form { padding: 0; }
.rs-product-request-form .rs-section-title { color: var(--rs-white); font-size: 28px; }

/* font-size in px, not Bootstrap's default 1rem: vendor/main.css sets
   html{font-size:10px} site-wide, so 1rem here renders at a near-invisible
   10px instead of the expected 16px (same trap as the height rem bug below) */
.rs-product-request-form-input .form-control {
    background: var(--rs-white);
    color: var(--rs-title-primary);
    border: 1px solid var(--rs-title-primary);
    border-radius: 8px;
    padding-inline: 14px;
    font-size: 16px;
}
.rs-product-request-form-input .form-floating > textarea.form-control { color: var(--rs-title-primary); }
/* px, not rem: vendor/main.css sets html{font-size:10px} site-wide, so
   "4rem" here would compute to 40px, not the expected 64px */
.rs-product-request-form-input .form-floating > .form-control { height: 64px; min-height: 64px; }
/* the `> textarea.form-control` combinator+type makes this MORE specific
   than the rule above (0,3,1 vs 0,3,0) so it reliably wins instead of
   losing to it — a plain `.rs-product-request-form-input textarea.form-control`
   (0,2,1) would lose that fight and silently render at 64px too */
.rs-product-request-form-input .form-floating > textarea.form-control { height: 150px; min-height: 150px; resize: none; }
.rs-product-request-form-input .form-control::placeholder { color: transparent; }
.rs-product-request-form-input .form-control:focus {
    color: var(--rs-title-primary);
    border-color: var(--rs-title-primary);
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35);
}
.rs-product-request-form-input .form-floating > label { color: var(--rs-title-primary); opacity: .75; }
.rs-product-request-form-input .form-floating > .form-control:focus ~ label,
.rs-product-request-form-input .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--rs-title-primary); opacity: 1; }
/* the floating label (+ Bootstrap's own white ::after backing box behind it)
   sits absolutely positioned over the top-left corner of the field; at our
   16px font-size (vs. the site's default 10px-rem-scaled text) the default
   1.625rem (16px) top padding isn't enough clearance, so typed text's first
   line rendered underneath/behind that label instead of below it */
.rs-product-request-form-input .form-floating > textarea.form-control:focus,
.rs-product-request-form-input .form-floating > textarea.form-control:not(:placeholder-shown) {
    padding-top: 34px;
    padding-bottom: 12px;
}

/* fe(..., 'select', ...) (cloud.php's "modello" dropdown) renders a Bootstrap
   .form-select, not .form-control — none of the rules above match it, so it
   needs its own copy of the same white/bordered look */
.rs-product-request-form-input .form-select {
    background-color: var(--rs-white);
    color: var(--rs-title-primary);
    border: 1px solid var(--rs-title-primary);
    border-radius: 8px;
    padding-inline: 14px;
    font-size: 16px;
}
.rs-product-request-form-input .form-floating > .form-select { height: 64px; min-height: 64px; padding-top: 34px; }
.rs-product-request-form-input .form-select:focus {
    color: var(--rs-title-primary);
    border-color: var(--rs-title-primary);
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35);
}
.rs-product-request-form-input .form-floating > .form-select ~ label { color: var(--rs-title-primary); opacity: 1; }

.rs-product-request-form-check { color: var(--rs-white); font-size: 14px; }
.rs-product-request-form-check a { color: var(--rs-white); text-decoration: underline; }
.rs-product-request-form-check .form-check-label { color: var(--rs-white); }
/* checkbox() (vendor snippets.php) renders the switch, its label AND the
   validation message as three siblings inside this same .form-check div —
   without flex-wrap the error message became a 3rd column next to the
   label instead of a line of its own underneath */
.rs-product-request-form-check .form-check.form-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-left: 0;
}
/* see .rs-contact-form-check .form-check.form-switch .form-check-label above:
   same flex-wrap line-breaking issue, same fix */
.rs-product-request-form-check .form-check.form-switch .form-check-label {
    flex: 1 1 0%;
    min-width: 0;
}
.rs-product-request-form-check .invalid-feedback {
    flex-basis: 100%;
    margin: 0;
    color: #dc3545;
    background: var(--rs-white);
    border-radius: 6px;
    padding: 6px 10px;
}
.rs-product-request-form-check input[type="checkbox"].form-check-input {
    width: 44px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 2em;
    border: 1px solid var(--rs-white);
    background-color: rgba(255, 255, 255, .25);
}
.rs-product-request-form-check input[type="checkbox"].form-check-input:checked {
    background-color: var(--rs-white);
    border-color: var(--rs-white);
    /* Bootstrap draws the switch knob as an SVG circle via this custom
       property, not a real element — overriding background-color alone
       (white track) left a white-on-white knob (Bootstrap's own default
       fill for :checked is #fff), which is why it "disappeared" on click */
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231b4685'/%3e%3c/svg%3e");
}

.rs-product-request-form-submit { margin-top: 10px; text-align: right; }

/* mobile, all forms (contact + product/cloud request forms): the switch and
   its (often multi-line) privacy label sit in the same flex row already,
   but `align-items: center` vertically centers the switch against the whole
   wrapped paragraph, so it visually reads as floating mid-text instead of
   sitting beside it — align it to the first line instead. The submit button
   also needs more breathing room above it once that label wraps to several
   lines on a narrow screen. */
@media (max-width: 767.98px) {
    .rs-contact-form-check .form-check.form-switch,
    .rs-product-request-form-check .form-check.form-switch {
        align-items: flex-start;
    }
    .rs-contact-form-submit { margin-top: 30px; }
    .rs-product-request-form-submit { margin-top: 24px; }
}

/* form validation error banner (formErrorContent(), any form site-wide):
   solid red instead of Bootstrap's pale default, bold white text, white X */
.alert-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    border-radius: 12px;
    color: var(--rs-white);
    font-weight: 700;
    padding: 20px 24px;
}
/* the close button relies on data-bs-dismiss="alert", but this site never
   loads Bootstrap's JS bundle — nothing listens for the click, so it sits
   there doing nothing. Markup comes from formErrorContent() in vendor
   helpers.php (can't edit vendor), so hide it here instead. */
.alert-danger .btn-close { display: none; }

/* news carousel (product-model.php, home.php) — native scroll-snap track
   (no JS state/looping needed), 1 card per view on mobile, 3 on desktop */
.rs-news-carousel { position: relative; }
.rs-news-carousel-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.rs-news-carousel-track::-webkit-scrollbar { display: none; }
.rs-news-carousel-item { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 992px) {
    .rs-news-carousel-track { gap: 40px; }
    .rs-news-carousel-item { flex: 0 0 calc((100% - 80px) / 3); }
}
.rs-news-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50px;
    background: var(--rs-white);
    border: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    color: var(--rs-theme-blue);
}
.rs-news-carousel-arrow:hover { background: var(--rs-theme-blue); color: var(--rs-white); }
.rs-news-carousel-arrow-prev { left: -23px; }
.rs-news-carousel-arrow-prev svg { transform: rotate(180deg); }
.rs-news-carousel-arrow-next { right: -23px; }
/* below 992px the arrows sit on top of .container's 12px gutter (Bootstrap
   default), which is narrower than the -23px offset above and was causing
   the arrows to poke past the viewport edge, triggering horizontal page
   scroll on mobile/tablet */
@media (max-width: 991.98px) {
    .rs-news-carousel-arrow-prev { left: 8px; }
    .rs-news-carousel-arrow-next { right: 8px; }
}
.rs-news-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.rs-news-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .35); border: none; cursor: pointer; padding: 0; }
.rs-news-carousel-dot.is-active { background: var(--rs-white); }
/* at >=992px .rs-news-carousel-item switches to 3-up (see rule above) and
   $latestNews is capped to 3 in home.php, so the row is never scrollable
   on desktop — arrows/dots are only meaningful below that breakpoint. */
@media (min-width: 992px) {
    .rs-news-carousel-arrow, .rs-news-carousel-dots { display: none; }
}

.rs-about-three .rs-about-tab-content h3 { font-size: 30px; }

/* cloud.php: hero product shot sits plain on the white background, no
   card treatment (radius/shadow) */
.rs-cloud-hero-thumb img { border-radius: 0; box-shadow: none; }
/* cloud.php: h1/h2 sit next to the hero image instead of in their own
   full-width banner above it — .rs-page-heading's own top/bottom padding
   (meant for a standalone banner) is zeroed out here since the outer
   .section-space row already provides the section's spacing; the
   `.section-space-top` class stays so the desktop 60px title size rule
   (`.rs-page-heading.section-space-top .rs-page-heading-title`) still matches */
.rs-cloud-hero-heading .rs-page-heading { padding: 0; }

/* cloud.php: model photo above each CLOUD L / CLOUD XL text box */
.rs-cloud-model-thumb {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--rs-white);
    border: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rs-cloud-model-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* cloud.php: CLOUD L and CLOUD XL are two distinct product tiers, but their
   columns had no background/border of their own — on the section's shared
   bg-light they blended into one continuous block. Frame each plan as its
   own white card (border, shadow, accent top border) so the two offers read
   as clearly separate. This lives on the .rs-cloud-plan wrapper INSIDE
   .col-lg-6, not on the column itself: Bootstrap's row gutter is only inner
   padding, the column boxes are edge-to-edge, so a border on .col-lg-6
   would have made the two cards touch regardless of gutter width. */
.rs-cloud-plan {
    background: var(--rs-white);
    border: 1px solid rgba(0, 0, 0, .08);
    border-top: 4px solid var(--rs-title-primary);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    height: 100%;
}
@media (max-width: 767.98px) {
    .rs-cloud-plan { padding: 30px 25px; }
}
/* the spec-list <li> chips were white-on-white against the section's plain
   bg-light background; now that the plan itself is a white card, give them
   a light tint instead so they still stand out inside it */
.rs-cloud-feature-area .rs-feature-item ul li,
.rs-cloud-feature-area .rs-feature-item ol li {
    background: #f4f6f5;
}
/* wider gap between the two cards on desktop — g-5's default 3rem read as
   too tight once both plans became solid, bordered cards side by side */
@media (min-width: 992px) {
    .rs-cloud-feature-area .row.g-5 { --bs-gutter-x: 5rem; }
}

/* .section-space-top only pads the top; without this the feature cards
   above sat almost flush against the CTA section right below them */
.rs-cloud-feature-area { padding-bottom: 100px; }
@media (max-width: 991.98px) { .rs-cloud-feature-area { padding-bottom: 80px; } }
@media (max-width: 767.98px) { .rs-cloud-feature-area { padding-bottom: 70px; } }

/* cloud.php's spec lists (Categorie / Capacità / Dimensioni) wrapped to a
   2nd row on desktop since each <li> has a fixed flex-basis of 240px and
   3 don't fit in one column's width — force them onto a single row */
@media (min-width: 992px) {
    /* !important: needed to beat `.rs-feature-two:not(.has-bg-light-blue)
       .rs-feature-item ul li` (vendor-adjacent rule in this same file,
       3 classes) — `.rs-cloud-feature-area .rs-feature-item ul li` alone
       is only 2 classes and loses on specificity regardless of order */
    .rs-cloud-feature-area .rs-feature-item ul,
    .rs-cloud-feature-area .rs-feature-item ol {
        flex-wrap: nowrap !important;
    }
    .rs-cloud-feature-area .rs-feature-item ul li,
    .rs-cloud-feature-area .rs-feature-item ol li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}

.rs-header-area.rs-header-one { border-bottom: 1px solid rgba(31, 31, 31, 0.07); }

/* sitemap.php: 3-column masonry list of the site tree (level 1 = section
   heading, level 2 = column of links, level 3 = leaf links only) */
.sitemap, .sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap > li:first-child > a { margin-top: 0; padding-top: 0; border: none; }
.sitemap > li { display: flex; flex-direction: column; flex-wrap: wrap; }
.sitemap > li.nochild + li > a { margin-top: 0; }
.sitemap > li + li.nochild > a { padding-top: 1.5rem; }
.sitemap > li > a { border-top: 1px solid #d2d2d7; padding: 3rem .75rem 1.5rem; margin-top: 3rem; }
.sitemap h2, .sitemap li h3 { font-weight: bold; }
.sitemap li h2 { margin-bottom: 0; font-size: 25px; }
.sitemap li h3 { font-size: 19px; margin-bottom: .3rem; }
.sitemap a { text-decoration: none; font-size: 17px; display: inline-block; width: 100%; }
.sitemap > li > ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 0;
}
.sitemap > li > ul > li {
    flex: 0 0 auto;
    width: 33.33333333%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 .75rem 0;
}
.sitemap > li > ul > li.haschild > a { padding-top: .75rem; text-decoration: underline; }
.sitemap > li > ul > li > a,
.sitemap > li > ul > li > ul > li > a {
    padding-bottom: .5rem;
    line-height: 1.3;
}
@media screen and (max-width: 768px) {
    .sitemap > li > ul > li:not(:first-child) > a > h3 { margin-top: 1.5rem; }
    .sitemap > li > ul { flex-direction: column; gap: 0; margin-top: 1.5rem; }
    .sitemap > li > ul > li { width: 100%; }
    .sitemap > li > ul > li { padding-top: 0; }
    .sitemap > li:not(.nochild) > a { margin-bottom: 0; padding-bottom: 0; }
    .sitemap > li > ul > li.haschild + li:not(.haschild) { margin-top: 1.5rem; }
}

.invalid-feedback {
  background: white;
  border-radius: 50px;
  padding: 5px 15px;
}

/* ---------- header search toggle + modal ---------- */
.rs-header-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #d9d9d9;
    background: transparent;
    color: var(--rs-theme-blue);
    font-size: 20px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.rs-header-search-toggle:hover,
.rs-header-search-toggle[aria-expanded="true"] {
    background: var(--rs-theme-blue);
    border-color: var(--rs-theme-blue);
    color: var(--rs-white);
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 20px 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
}
.search-modal.is-open { opacity: 1; visibility: visible; }
.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 30, .55);
}
.search-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 620px;
    background: var(--rs-white);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    transform: translateY(-16px);
    transition: transform .25s ease;
}
.search-modal.is-open .search-modal-dialog { transform: translateY(0); }
.search-modal-title { margin: 0 0 20px; color: var(--rs-title-primary); font-size: 24px; }
.search-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #616161;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
}
.search-modal-close:hover { background: #f1f1f1; }
.search-modal-form { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--rs-theme-blue); padding-bottom: 8px; }
.search-modal-form input[type="text"] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 8px 0;
}
.search-modal-form button[type="submit"] {
    border: none;
    background: transparent;
    color: var(--rs-theme-blue);
    font-size: 22px;
    display: inline-flex;
    cursor: pointer;
}
body.search-open { overflow: hidden; }

@media (max-width: 480px) {
    .search-modal { padding-top: 8vh; }
    .search-modal-dialog { padding: 30px 24px; }
}

/* ---------- search results page ---------- */
.rs-search-page-form {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 620px;
    margin: 0 auto 50px;
    border-bottom: 2px solid var(--rs-theme-blue);
    padding-bottom: 8px;
}
.rs-search-page-form input[type="text"] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 8px 0;
}
.rs-search-page-form button[type="submit"] {
    border: none;
    background: transparent;
    color: var(--rs-theme-blue);
    font-size: 22px;
    display: inline-flex;
    cursor: pointer;
}
.rs-search-hint,
.rs-search-empty { text-align: center; font-size: 17px; }
.rs-search-count {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ececec;
    font-size: 17px;
    color: #616161;
}
.rs-search-count strong { color: var(--rs-theme-blue); font-weight: 700; }