/* =================================================================
   site.css - AxoMem custom stylesheet, layered on Bootstrap 5.3.
   Re-theme OFF the legacy Canvas (Bootstrap 3) theme. This file
   re-implements the subset of Canvas class names still used by the
   page markup, plus brand tokens, header/footer chrome and
   accessibility affordances.

   Load order (see include/html_head_default.php):
     bootstrap.min.css -> swiper-bundle.min.css -> font-icons.css
     -> fonts.css -> site.css  (site.css always LAST)
   ================================================================= */

/* -----------------------------------------------------------------
   1. Brand tokens
----------------------------------------------------------------- */
:root {
    --brand: #3f89b1;          /* accent / headings / decorative     */
    --brand-dark: #2b6488;     /* inline content links (AA on white) */
    --brand-darker: #1d445e;   /* link hover                          */
    --ink: #333333;            /* body text                           */
    --heading-ink: #1a1a1a;    /* headings on light                   */
    --muted: #707070;          /* muted / subtitle text               */
    --dark-bg: #1c2127;        /* dark header / footer / dark sections*/
    --dark-bg-2: #232a31;      /* dark section alt                    */
    --dark-ink: #cfd8df;       /* text on dark                        */
    --line: #e5e5e5;           /* hairline borders on light           */
    --header-h: 100px;
    --header-h-sticky: 70px;
}

/* -----------------------------------------------------------------
   2. Base typography (Bootstrap sets sensible defaults; we tune)
----------------------------------------------------------------- */
body {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-ink);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
}
/* Coloured emphasis spans inside headings (Canvas convention) */
h1 > span:not(.nocolor), h2 > span:not(.nocolor), h3 > span:not(.nocolor),
h4 > span:not(.nocolor), h5 > span:not(.nocolor), h6 > span:not(.nocolor),
.color { color: var(--brand); }

a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand-darker); }

::selection { background: var(--brand); color: #fff; }
::-moz-selection { background: var(--brand); color: #fff; }

.lead { font-size: 1.15rem; line-height: 1.6; color: #555; font-weight: 400; }
.subtitle { color: var(--muted); font-size: 1.05rem; }

/* -----------------------------------------------------------------
   3. Layout helpers ported from Canvas
----------------------------------------------------------------- */
.clearfix::after { content: ""; display: table; clear: both; }
.center, .text-center { text-align: center !important; }
.tright { text-align: right !important; }
.divcenter { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; }
.stretched { width: 100%; }
.nocolor { color: inherit !important; }

/* Spacing helpers (topmargin / bottommargin family) */
.nomargin      { margin: 0 !important; }
.notopmargin   { margin-top: 0 !important; }
.nobottommargin{ margin-bottom: 0 !important; }
.nobottomborder{ border-bottom: 0 !important; }
.topmargin        { margin-top: 50px !important; }
.topmargin-sm     { margin-top: 20px !important; }
.topmargin-lg     { margin-top: 80px !important; }
.bottommargin     { margin-bottom: 50px !important; }
.bottommargin-sm  { margin-bottom: 20px !important; }
.bottommargin-lg  { margin-bottom: 80px !important; }

/* -----------------------------------------------------------------
   4. Canvas fractional column grid -> flex.
   col_full / col_one_half / col_one_third / col_two_third /
   col_one_fourth, with col_last clearing the row on desktop.
   Stacks to full-width below 768px.
----------------------------------------------------------------- */
.col_full, .col_one_half, .col_two_third, .col_one_third,
.col_three_fourth, .col_one_fourth, .col_one_fifth {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 30px;
}
.col_last { margin-right: 0 !important; }
.col_full        { width: 100%; float: none; margin-right: 0; }
.col_one_half    { width: 48%; }
.col_one_third   { width: 30.66%; }
.col_two_third   { width: 65.33%; }
.col_one_fourth  { width: 22%; }
.col_three_fourth{ width: 74%; }
.col_one_fifth   { width: 16.8%; }
@media (max-width: 767.98px) {
    .col_full, .col_one_half, .col_two_third, .col_one_third,
    .col_three_fourth, .col_one_fourth, .col_one_fifth {
        width: 100%; float: none; margin-right: 0;
    }
}

/* -----------------------------------------------------------------
   5. Heading block
----------------------------------------------------------------- */
.heading-block { margin-bottom: 40px; }
.heading-block h1, .heading-block h2, .heading-block h3, .heading-block h4 {
    font-weight: 600;
    margin-bottom: 12px;
}
.heading-block h2 { font-size: 1.9rem; }
.heading-block > span:not(.before-heading) {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.5;
}
.heading-block.center, .heading-block.divcenter { text-align: center; }
.heading-block.center > span { max-width: 720px; margin-left: auto; margin-right: auto; }
/* Decorative underline variant */
.heading-block.border-color::after,
.heading-block.border::after {
    content: ""; display: block; width: 40px; height: 2px;
    margin-top: 18px; background: var(--brand);
}
.heading-block.center.border-color::after,
.heading-block.center.border::after { margin-left: auto; margin-right: auto; }

.fancy-title { position: relative; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.fancy-title h1, .fancy-title h2, .fancy-title h3, .fancy-title h4 {
    display: inline-block; position: relative; bottom: -1px;
    padding-right: 15px; border-bottom: 2px solid var(--brand); margin-bottom: 0;
}

/* -----------------------------------------------------------------
   6. Feature box
----------------------------------------------------------------- */
.feature-box { position: relative; margin-top: 20px; }
.feature-box .fbox-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin-bottom: 18px;
}
.feature-box .fbox-icon i,
.feature-box .fbox-icon img { font-size: 42px; line-height: 1; color: var(--brand); }
.feature-box h4, .feature-box h3 { margin-bottom: 8px; font-size: 1.15rem; }
.feature-box p, .feature-box .fbox-desc { color: #555; margin-bottom: 0; }
.feature-box .fbox-desc .subtitle { display: block; margin-top: 4px; color: var(--muted); }

/* Centered variant */
.feature-box.fbox-center { text-align: center; }
.feature-box.fbox-center .fbox-icon { margin-left: auto; margin-right: auto; }

/* Media box: icon/image sits inline to the left of the text */
.feature-box.fbox-media, .feature-box.media-box { display: flex; gap: 18px; align-items: flex-start; }
.feature-box.fbox-media .fbox-icon, .feature-box.media-box .fbox-icon { flex: 0 0 auto; margin-bottom: 0; }
.feature-box.fbox-media .fbox-desc, .feature-box.media-box .fbox-desc { flex: 1 1 auto; }

/* Rounded / circled icon treatments */
.fbox-effect .fbox-icon,
.i-circled {
    border-radius: 50%;
    background: rgba(63, 137, 177, 0.10);
}
.i-circled {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; color: var(--brand);
}

/* -----------------------------------------------------------------
   7. Buttons
----------------------------------------------------------------- */
.button {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--brand);
    border: 2px solid var(--brand);
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    margin: 5px;
    vertical-align: middle;
}
.button:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.button-large { padding: 13px 30px; font-size: 16px; }
.button-rounded { border-radius: 40px; }
.button-dark { background: #2c2c2c; border-color: #2c2c2c; color: #fff; }
.button-dark:hover { background: var(--brand); border-color: var(--brand); }
.button-light { background: #fff; border-color: #fff; color: var(--ink); }
.button-light:hover { background: #f1f1f1; border-color: #f1f1f1; color: var(--ink); }
.button-border { background: transparent; color: var(--brand); border-color: var(--brand); }
.button-border:hover { background: var(--brand); color: #fff; }
.button-border.button-light { color: #fff; border-color: #fff; }
.button-border.button-light:hover { background: #fff; color: var(--ink); }
.button-3d { border: none; padding: 12px 24px; }
.button-3d:hover { box-shadow: inset 0 0 100px rgba(0,0,0,0.15); }
/* Reveal: label content slides while a chevron appears */
.button-reveal { overflow: hidden; padding-right: 40px; }
.button-reveal i {
    position: absolute; top: 0; right: 0; height: 100%;
    width: 34px; display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateX(6px); transition: opacity .2s ease, transform .2s ease;
}
.button-reveal:hover i { opacity: 1; transform: translateX(0); }
/* Buttons on dark backgrounds keep readable defaults */
.dark .button-dark { background: #fff; border-color: #fff; color: var(--ink); }
.dark .button-dark:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* -----------------------------------------------------------------
   8. Sections + promo bands
----------------------------------------------------------------- */
.section {
    position: relative;
    margin: 60px 0;
    padding: 60px 0;
    background-color: #f7f8f9;
    overflow: hidden;
}
.section.nomargin { margin: 0 !important; }
.content-wrap { padding: 60px 0; position: relative; }

/* Dark section / dark contexts */
.section.dark, .dark.section { background-color: var(--dark-bg); }
.dark, .section.dark { color: var(--dark-ink); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #fff; }
.dark p, .dark li, .dark .subtitle, .dark address { color: var(--dark-ink); }
.dark .heading-block > span { color: rgba(255,255,255,0.72); }
/* Parallax bands often carry a background image; darken for legibility */
.section.parallax { background-size: cover; background-position: center; }
.section.parallax.dark::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(20, 24, 28, 0.6); z-index: 0;
}
.section.parallax > .container { position: relative; z-index: 1; }

/* Promo call-to-action band */
.promo {
    position: relative;
    padding: 30px 0;
}
.promo h3 { font-size: 1.5rem; margin-bottom: 4px; }
.promo p { margin-bottom: 0; color: #555; }
.promo.dark p { color: var(--dark-ink); }
.promo-border { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dark .promo-border, .promo-border.dark { border-color: rgba(255,255,255,0.12); }
/* CTA buttons inside a promo flex wrapper sit in normal flow */
.promo .d-flex a.button, .promo.promo-border .d-flex a.button { margin-top: 0; }

/* -----------------------------------------------------------------
   9. Testimonials
----------------------------------------------------------------- */
.testimonial {
    position: relative;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
}
.testimonial.testimonial-full, .dark .testimonial { background: transparent; }
.testi-content { position: relative; }
.testi-content p {
    font-size: 1.15rem; line-height: 1.6; font-style: italic;
    margin-bottom: 14px;
}
.testi-content p::before { content: "\201C"; }
.testi-content p::after { content: "\201D"; }
.testi-meta { font-weight: 600; color: var(--brand); }
.testi-meta span { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.dark .testi-meta span { color: rgba(255,255,255,0.65); }

/* -----------------------------------------------------------------
   10. Social icons
----------------------------------------------------------------- */
.social-icon {
    display: inline-block; width: 40px; height: 40px;
    line-height: 40px; text-align: center;
    border-radius: 3px; overflow: hidden; position: relative;
    color: #fff; background: #555;
    margin: 0 5px 5px 0; text-decoration: none;
    transition: background-color .2s ease;
}
.social-icon i { display: block; height: 40px; line-height: 40px; }
.social-icon i:last-child { color: #fff; }
.social-icon.si-dark { background: #3a3a3a; }
.social-icon.si-twitter:hover, .social-icon.si-colored.si-twitter { background: #00acee; }
.social-icon.si-linkedin:hover, .social-icon.si-colored.si-linkedin { background: #0e76a8; }
.social-icon:hover { color: #fff; }

/* -----------------------------------------------------------------
   11. Header + primary navigation
----------------------------------------------------------------- */
#header {
    position: relative;
    z-index: 199;
    background: var(--dark-bg);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
#header.dark { background: var(--dark-bg); }
#header-wrap { position: relative; }
#header .container { display: flex; align-items: center; justify-content: space-between; }

#logo { display: flex; align-items: center; height: var(--header-h); transition: height .25s ease; }
#logo a { display: inline-flex; align-items: center; }
#logo img { max-height: 60px; width: auto; transition: max-height .25s ease; }
#logo .retina-logo { display: none; }

/* Primary menu */
#primary-menu { display: flex; }
#primary-menu ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; }
#primary-menu ul li a {
    display: block; padding: 12px 14px;
    color: rgba(255,255,255,0.82); font-size: 14px; font-weight: 600;
    letter-spacing: 0.3px; text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
#primary-menu ul li a:hover,
#primary-menu ul li.current > a {
    color: #fff; border-bottom-color: var(--brand);
}

/* Hamburger trigger (hidden on desktop) */
#primary-menu-trigger {
    display: none;
    cursor: pointer;
    color: #fff; font-size: 22px; line-height: 1;
    padding: 10px; background: transparent; border: 0;
}

/* Sticky / shrink on scroll (toggled by js/site.js) */
#header.sticky-header {
    position: fixed; top: 0; left: 0; right: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
#header.sticky-header #logo { height: var(--header-h-sticky); }
#header.sticky-header #logo img { max-height: 44px; }
/* Spacer so content doesn't jump when header becomes fixed */
body.has-sticky-header { padding-top: var(--header-h); }

/* Transparent header variant for the homepage hero */
#header.transparent-header {
    position: absolute; top: 0; left: 0; right: 0;
    background: transparent; border-bottom: 0;
}
#header.transparent-header.sticky-header { position: fixed; background: var(--dark-bg); }

/* Mobile navigation */
@media (max-width: 991.98px) {
    #primary-menu-trigger { display: inline-flex; }
    #header .container { flex-wrap: wrap; }
    #logo { height: 70px; }
    #logo img { max-height: 44px; }
    #primary-menu {
        flex-basis: 100%;
        max-height: 0; overflow: hidden;
        transition: max-height .25s ease;
    }
    #primary-menu.is-open { max-height: 80vh; overflow-y: auto; }
    #primary-menu ul { flex-direction: column; width: 100%; gap: 0; padding-bottom: 10px; }
    #primary-menu ul li a {
        padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    #primary-menu ul li a:hover,
    #primary-menu ul li.current > a { border-bottom-color: rgba(255,255,255,0.06); color: var(--brand); }
    #header.transparent-header { position: relative; background: var(--dark-bg); }
    body.has-sticky-header { padding-top: 0; }
}

/* -----------------------------------------------------------------
   12. Homepage hero slider (Swiper)
----------------------------------------------------------------- */
#slider, .slider-parallax { position: relative; }
.hero-swiper { position: relative; width: 100%; }
.hero-swiper.full-screen, .full-screen { min-height: 100vh; }
.hero-swiper .swiper-slide {
    position: relative;
    display: flex; align-items: center;
    min-height: 560px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    color: #fff;
}
.hero-swiper.full-screen .swiper-slide { min-height: 100vh; }
.hero-swiper .swiper-slide.dark::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(18, 22, 26, 0.45); z-index: 1;
}
.hero-swiper .swiper-slide video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.slider-caption {
    position: relative; z-index: 2;
    max-width: 720px; padding: 0 15px;
    margin: 0 auto; width: 100%;
}
.slider-caption h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 14px; }
.slider-caption p { color: rgba(255,255,255,0.9); font-size: 1.15rem; }
/* Swiper arrows / pagination tuned to brand */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next { color: #fff; }
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after { font-size: 26px; }
.hero-swiper .swiper-pagination-bullet-active { background: var(--brand); }

/* Fast-Start / testimonial slider */
.faststart-swiper { position: relative; padding-bottom: 10px; }
.faststart-swiper .swiper-pagination-bullet-active { background: var(--brand); }
.faststart-swiper .swiper-button-prev,
.faststart-swiper .swiper-button-next { color: var(--brand); }

/* -----------------------------------------------------------------
   13. Accordion (native <details>/<summary>) for platform/products.
   Also keep legacy .toggle markup fully visible without JS.
----------------------------------------------------------------- */
.accordion-item, details.accordion-item {
    border: 1px solid var(--line);
    border-radius: 5px;
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
}
details.accordion-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--heading-ink);
    display: flex; align-items: center; gap: 12px;
    position: relative;
}
details.accordion-item > summary::-webkit-details-marker { display: none; }
/* Plus / minus indicator driven purely by [open] state */
details.accordion-item > summary::before {
    content: "\2b";                /* plus  */
    font-weight: 700; color: var(--brand);
    width: 1em; text-align: center; flex: 0 0 auto;
}
details.accordion-item[open] > summary::before { content: "\2212"; } /* minus */
details.accordion-item > summary .module-summary,
details.accordion-item > summary .product-summary {
    display: block; font-weight: 400; font-size: 0.9rem; color: var(--muted);
    margin-top: 3px; width: 100%;
}
details.accordion-item > .accordion-body,
details.accordion-item > .togglec {
    padding: 4px 20px 20px 20px;
}

/* Legacy Canvas toggle markup: keep OPEN and visible without JS */
.toggle { border: 1px solid var(--line); border-radius: 5px; margin-bottom: 12px; background: #fff; }
.togglet {
    display: block; padding: 16px 20px; font-weight: 600; font-size: 1.1rem;
    color: var(--heading-ink); cursor: pointer; position: relative;
}
.togglet .module-summary, .togglet .product-summary {
    display: block; font-weight: 400; font-size: 0.9rem; color: var(--muted); margin-top: 3px;
}
.togglet .toggle-open { display: inline; color: var(--brand); }
.togglet .toggle-closed { display: none; }
.togglec { display: block; padding: 4px 20px 20px 20px; }

/* -----------------------------------------------------------------
   14. Footer
----------------------------------------------------------------- */
#footer {
    background: var(--dark-bg);
    color: var(--dark-ink);
    padding-top: 60px;
    font-size: 14px;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5 { color: #fff; }
#footer a { color: #fff; }
#footer a:hover { color: var(--brand); }
.footer-widgets-wrap { padding-bottom: 40px; }
.footer-widgets-wrap .widget { margin-bottom: 20px; }
.footer-logo { max-height: 40px; margin-bottom: 18px; }
#footer p { color: var(--dark-ink); }

/* Office blocks */
.footer-offices h5 {
    font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #fff; margin: 0 0 6px 0; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-offices h5:first-child { padding-top: 0; border-top: 0; }
.footer-offices h5 small {
    display: inline-block; font-size: 10px; font-weight: 400; text-transform: none;
    letter-spacing: 0.5px; color: rgba(255,255,255,0.55); margin-left: 8px; vertical-align: middle;
}
.footer-offices address { font-style: normal; margin: 0; line-height: 1.55; font-size: 13.5px; }
.footer-offices .office-phone { margin: 4px 0 14px 0; font-size: 13px; }
.footer-offices address:last-child { margin-bottom: 0; }
.footer-offices address a { color: inherit; text-decoration: underline; }
.footer-offices address a:hover { color: #fff; }

#copyrights {
    padding: 20px 0;
    background: #12171c;
    border-top: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}
#copyrights a { color: rgba(255,255,255,0.85); }

/* -----------------------------------------------------------------
   15. Back-to-top
----------------------------------------------------------------- */
#gotoTop {
    position: fixed; right: 20px; bottom: 20px; z-index: 299;
    width: 42px; height: 42px; line-height: 42px; text-align: center;
    color: #fff; background: var(--brand); border-radius: 4px;
    cursor: pointer; font-size: 18px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
#gotoTop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#gotoTop:hover { background: var(--brand-dark); }

/* -----------------------------------------------------------------
   16. Accessibility - skip link + focus rings
----------------------------------------------------------------- */
.skip-link {
    position: absolute; top: -100px; left: 0; z-index: 10000;
    background: var(--brand); color: #fff !important;
    padding: 10px 18px; font-weight: 700; font-size: 14px;
    text-decoration: none; border-radius: 0 0 4px 0;
    transition: top .15s ease-in-out;
}
.skip-link:focus { top: 0; outline: 2px solid #fff !important; outline-offset: -4px !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
#primary-menu-trigger:focus-visible,
#gotoTop:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(63, 137, 177, 0.25) !important;
}
/* On dark chrome use a white ring for contrast */
#header a:focus-visible, #footer a:focus-visible,
#primary-menu-trigger:focus-visible {
    outline-color: #fff !important;
}

/* -----------------------------------------------------------------
   17. WCAG AA content link contrast
   #3f89b1 on white fails AA; use the darker #2b6488 with underline
   for inline links inside #content. Buttons/social/nav exempt.
----------------------------------------------------------------- */
#content p a, #content li a, #content address a,
#content .citation a, #content .highlight-body a,
#content .stage-intro a, #content .lead a, #content .module-summary a {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#content p a:hover, #content li a:hover, #content address a:hover,
#content .citation a:hover, #content .highlight-body a:hover,
#content .stage-intro a:hover, #content .lead a:hover, #content .module-summary a:hover {
    color: var(--brand-darker);
    text-decoration-thickness: 2px;
}
#content a.button, #content a.button:hover,
#content .highlight-links a, #content .highlight-links a:hover,
#content a.social-icon { text-decoration: none; }

/* -----------------------------------------------------------------
   18. Cookie notification banner
   Shown/hidden by js/site.js via the websiteUsesCookies cookie.
----------------------------------------------------------------- */
#cookie-notification {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    background-color: #2b3a47; color: #e5edf2;
    padding: 18px 0; border-top: 3px solid var(--brand);
    display: none;              /* revealed by site.js when needed */
}
#cookie-notification.is-visible { display: block; }
#cookie-notification p { color: #e5edf2; margin: 0; }
#cookie-notification a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
#cookie-notification a:hover { color: #cfe2f0; }
#cookie-notification a.cookie-accept {
    background-color: var(--brand); color: #fff !important;
    border: none; font-weight: 700; text-decoration: none; padding: 10px 22px;
}
#cookie-notification a.cookie-accept:hover { background-color: var(--brand-dark); color: #fff !important; }

/* -----------------------------------------------------------------
   19. Hero background-video pause control (WCAG 2.2.2)
----------------------------------------------------------------- */
.hero-video-toggle {
    position: absolute; bottom: 20px; right: 20px; z-index: 5;
    width: 40px; height: 40px; border-radius: 50%;
    background-color: rgba(0,0,0,0.55); color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    cursor: pointer; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .2s ease, transform .2s ease;
}
.hero-video-toggle:hover, .hero-video-toggle:focus-visible {
    background-color: rgba(0,0,0,0.8); transform: scale(1.05);
}
.hero-video-toggle:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }
.hero-video-toggle i { display: block; }
@media (max-width: 575.98px) {
    .hero-video-toggle { bottom: 12px; right: 12px; width: 36px; height: 36px; }
}

/* -----------------------------------------------------------------
   20. Optional reveal-on-scroll.
   MUST degrade to fully visible: only hide when JS has flagged the
   document as reveal-capable (html.js-reveal). No-JS => visible.
----------------------------------------------------------------- */
html.js-reveal [data-reveal] {
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
html.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
    .hero-swiper .swiper-slide, #gotoTop, .button { transition: none; }
}