/* =========================================================================
   YMIR HOSTING - RECOVERY POLISH STYLESHEET
   Generated: 2026-06-03
   Purpose: CSS-only consolidated fixes for issues discovered by the recovery
            audit. No JS dependencies. Safe to load AFTER the Bricks/Theme
            stylesheets.

   Issue categories addressed:
     - broken-carousel        (sliders that never initialize w/o swiper/splide)
     - empty-section          (sections that render empty without JS)
     - z-index                (KPI numbers rendering behind/above text)
     - broken-layout          (header buttons, hero KPI rhythm, hero grid)
     - missing-image          (graceful fallback for 404'd <img>)
     - dead-link              (link-broken visual + interaction state)
     - typo                   (visual flag only; copy must be fixed in HTML)
     - unstyled-fallback      (data:image/svg+xml lazyload placeholders)
     - other                  (wpml switcher, autoindex, etc.)

   Pages touched: home, services (404), about-us, machine/*, blog index,
                  blog post, /fr/ (404).

   Sentinel classes introduced (apply in HTML to opt-in):
     .ymir-tcards        -> static testimonial grid
     .ymir-footer-v2     -> rebuilt 4-col footer
     .ymir-card          -> generic card w/ image fallback
     .ymir-static-grid   -> generic static replacement for splide/swiper
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. DESIGN TOKENS (scoped, do not leak)
   ------------------------------------------------------------------------- */
:root {
  --ymir-bg:        #0b0d0e;
  --ymir-bg-2:      #14181c;
  --ymir-bg-3:      #0a0c0d;
  --ymir-border:    #1f2429;
  --ymir-text:      #e7ebee;
  --ymir-text-mute: #98a2b3;
  --ymir-text-soft: #d1d5db;
  --ymir-accent:    #c1dfc4;
  --ymir-accent-2:  #6fbf73;
  --ymir-radius:    14px;
  --ymir-radius-lg: 24px;
  --ymir-shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}


/* =========================================================================
   A. HERO KPI Z-INDEX FIX
   Issue: huge counter numbers ("0%", "0", ...) render behind/over the label
          text because Bricks counter has no stacking context.
   Selectors are real (from index.html): hero-about__grid-count,
   hero-about__about-count-wrapper, hero-about__counter, .count.
   ========================================================================= */
.hero-about__grid-count {
  position: relative;
  isolation: isolate;
}

.hero-about__about-count-wrapper {
  position: relative;
  isolation: isolate;
  z-index: 1;
}

/* The animated number (Bricks counter) - push behind, fade as watermark */
.hero-about__counter,
.hero-about__about-count-wrapper .brxe-counter,
.hero-about__about-count-wrapper .count {
  position: relative;
  z-index: 0;
}

/* Any heading / label / description text inside the KPI card sits above */
.hero-about__about-count-wrapper .brxe-heading,
.hero-about__about-count-wrapper .brxe-text-basic,
.hero-about__about-count-wrapper > p,
.hero-about__about-count-wrapper > span:not(.count):not(.prefix):not(.suffix) {
  position: relative;
  z-index: 2;
}

/* If the counter never animated (no JS) the literal "0" reads as broken.
   Fade it so the label dominates visually. */
.hero-about__counter[data-bricks-counter-options] .count {
  opacity: .35;
}

/* Same defensive treatment for "How it works" big "01/02/03" watermarks */
.how-works__works-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.how-works__works-card_count {
  z-index: 0 !important;       /* override Bricks z-index:-1 (bled to bg) */
  opacity: .07;
  pointer-events: none;
  top: -20px !important;       /* clamp so it doesn't overflow on narrow */
}
.how-works__works-card > *:not(.how-works__works-card_count) {
  position: relative;
  z-index: 2;
}


/* =========================================================================
   B. STATIC TESTIMONIAL GRID (.ymir-tcards)
   Replaces the broken brxe-slider-nested / splide testimonial carousels on
   home and machine pages. Apply class .ymir-tcards to a wrapping container
   and put .testemonail-section__card (existing class) children inside.
   ========================================================================= */
.ymir-tcards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
  list-style: none;
}

.ymir-tcards > * {
  background: var(--ymir-bg-2);
  border: 1px solid var(--ymir-border);
  border-radius: var(--ymir-radius);
  padding: 24px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ymir-text);
  transition: transform .25s ease, border-color .25s ease;
}
.ymir-tcards > *:hover {
  transform: translateY(-2px);
  border-color: var(--ymir-accent-2);
}

/* Photo at top, circular */
.ymir-tcards .testemonail-section__author-image,
.ymir-tcards .testemonail-section__author-image img,
.ymir-tcards img.ymir-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ymir-bg-3);
  flex: 0 0 auto;
}

.ymir-tcards .testemonail-section__author-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ymir-tcards .testemonail-section__author-card .brxe-heading,
.ymir-tcards [data-ymir-name] {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}
.ymir-tcards .testemonail-section__author-card .brxe-text-basic,
.ymir-tcards [data-ymir-role] {
  font-size: .85rem;
  color: var(--ymir-text-mute);
  margin: 0;
}

.ymir-tcards .testemonail-section__txt-description,
.ymir-tcards [data-ymir-quote] {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ymir-text-soft);
  margin-top: 12px;
}

@media (max-width: 1080px) {
  .ymir-tcards { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .ymir-tcards { grid-template-columns: 1fr; }
  .ymir-tcards > * { min-height: 0; }
}


/* =========================================================================
   C. FOOTER REBUILD (.ymir-footer-v2)
   Apply .ymir-footer-v2 to the <footer> or wrapping section to opt-in.
   Four columns: Logo+blurb / Quick links / Services / Contact.
   ========================================================================= */
.ymir-footer-v2 {
  background: var(--ymir-bg-3);
  color: var(--ymir-text-soft);
  padding: 64px 0;
  border-top: 1px solid var(--ymir-border);
}
.ymir-footer-v2 .ymir-footer-inner,
.ymir-footer-v2 > .brxe-container,
.ymir-footer-v2 > .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.ymir-footer-v2 h4,
.ymir-footer-v2 .ymir-footer-title {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 16px;
}
.ymir-footer-v2 p,
.ymir-footer-v2 .ymir-footer-blurb {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ymir-text-mute);
  margin: 0 0 16px;
}
.ymir-footer-v2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ymir-footer-v2 ul a {
  color: var(--ymir-text-soft);
  text-decoration: none;
  font-size: .9rem;
  transition: color .2s ease;
}
.ymir-footer-v2 ul a:hover {
  color: var(--ymir-accent);
}
.ymir-footer-v2 img,
.ymir-footer-v2 .brxe-logo img {
  max-width: 160px;
  height: auto;
  margin-bottom: 12px;
}
@media (max-width: 980px) {
  .ymir-footer-v2 .ymir-footer-inner,
  .ymir-footer-v2 > .brxe-container,
  .ymir-footer-v2 > .container {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 560px) {
  .ymir-footer-v2 .ymir-footer-inner,
  .ymir-footer-v2 > .brxe-container,
  .ymir-footer-v2 > .container {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   D. BROKEN IMAGE FALLBACK
   When an <img> 404s, the browser shows broken-icon + alt text. Hide that
   ugliness behind a subtle dark gradient placeholder. Applies to images
   inside .ymir-card OR any uploads asset that uses data-lazy-src (since
   WP-Rocket's lazy JS isn't loaded, those would otherwise stay blank).
   ========================================================================= */
.ymir-card img,
.ymir-card .brxe-image img {
  min-height: 160px;
  background: linear-gradient(135deg, #1a1f24 0%, #0e1114 100%);
  color: transparent;             /* hide alt text on broken */
  font-size: 0;
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
  display: block;
}

/* WP-Rocket lazyload placeholder pattern: src starts with data:image/svg+xml
   AND has data-lazy-src. If JS never swaps, force the real src to be used
   visually by hiding the SVG placeholder background gracefully. */
img[src^="data:image/svg+xml"][data-lazy-src] {
  background: linear-gradient(135deg, #1a1f24 0%, #0e1114 100%);
  min-height: 120px;
  border-radius: 8px;
}

/* Generic broken-image catch for the uploads tree - subtle gradient instead
   of the white broken-icon box. Uses the :not selector to skip already-loaded
   imagery the browser is happy with. */
img[src^="/wp-content/uploads/"] {
  background: linear-gradient(135deg, #1a1f24 0%, #0e1114 100%);
}

/* Partner logos default opacity was .4 (washed-out). Bump to .85 so static
   snapshot reads clearly. Hover keeps full opacity. */
.partners__logo-img,
.partners__logo-grid .brxe-image {
  opacity: .85 !important;
  transition: opacity .25s ease, filter .25s ease;
}
.partners__logo-img:hover,
.partners__logo-grid .brxe-image:hover {
  opacity: 1 !important;
  filter: drop-shadow(0 2px 6px rgba(193, 223, 196, .25));
}


/* =========================================================================
   E. GENERAL POLISH - typography, links, buttons, rhythm
   Light touch; avoids fighting recovered Bricks CSS where it works.
   ========================================================================= */

/* Smoother default link hover everywhere */
a {
  transition: color .2s ease, opacity .2s ease;
}
a:hover {
  color: var(--ymir-accent);
}

/* Bricks default buttons - softer hover & focus ring for a11y */
.bricks-button,
.brxe-button {
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.bricks-button:hover,
.brxe-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.bricks-button:focus-visible,
.brxe-button:focus-visible {
  outline: 2px solid var(--ymir-accent);
  outline-offset: 2px;
}

/* Heading rhythm - tighten leading for big display headings */
h1.brxe-heading, h2.brxe-heading {
  line-height: 1.15;
  letter-spacing: -0.01em;
}
p.brxe-text-basic, .brxe-text-basic {
  line-height: 1.6;
}


/* =========================================================================
   F. HIDE / NEUTRALIZE BROKEN JS SHELLS
   Many sliders never initialize because swiper.js / splide.js are absent.
   We force their static content to render where possible, OR hide entirely
   if a static replacement (e.g. .ymir-tcards) is provided in the HTML.
   ========================================================================= */

/* Force ALL undriven swiper slides to be visible (overrides Bricks rule
   that hides everything until swiper-initialized class is added by JS). */
.bricks-swiper-container:not(.swiper-initialized) .swiper-slide,
.bricks-swiper-container:not(.swiper-initialized) .swiper-slide:not(.swiper-slide-active) {
  opacity: 1 !important;
}
.bricks-swiper-container:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  transform: none !important;
}

/* Same for splide */
.splide:not(.is-initialized) .splide__list,
.splide:not(.is-active) .splide__list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  transform: none !important;
}
.splide:not(.is-initialized) .splide__slide,
.splide:not(.is-active) .splide__slide {
  opacity: 1 !important;
  flex: 1 1 280px;
  min-width: 240px;
}

/* Splide arrows are useless without JS - hide */
.splide__arrows,
.splide__arrow,
.bricks-swiper-button-next,
.bricks-swiper-button-prev,
.swiper-pagination,
.splide__pagination {
  display: none !important;
}

/* When the HTML opts-in to a static replacement by adding .ymir-static-grid,
   completely hide the legacy carousel shell that would otherwise be empty. */
.ymir-static-grid + .brxe-slider,
.ymir-static-grid + .brxe-slider-nested,
.ymir-static-grid ~ .splide,
.ymir-static-grid ~ .bricks-swiper-container {
  display: none !important;
}

/* Hide the WPML language switcher in the recovered build - it emits raw
   "BG-INTRO" / "WMU" gibberish without the flag-svg JS bundle. */
.brxe-wpml-language-switcher,
.wpml-ls-link.link-broken {
  display: none !important;
}

/* Dead links visual state - keep them readable but clearly disabled */
a.link-broken,
.link-broken {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .55;
  text-decoration: none;
  position: relative;
}
a.link-broken::after,
.link-broken::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--ymir-text-mute);
  vertical-align: middle;
  opacity: .6;
}

/* Hero slider on home — if it never initialized, just show the first slide
   so the section isn't a black void. */
.hero-about__slider .bricks-swiper-container:not(.swiper-initialized)
  .swiper-slide:first-child {
  display: block !important;
  width: 100% !important;
}
.hero-about__slider .bricks-swiper-container:not(.swiper-initialized)
  .swiper-slide:not(:first-child) {
  display: none !important;
}

/* Machine details accordion - render all panels open since the JS toggle
   isn't loaded. Keeps spec tables and "Hosting Services" copy visible. */
.machine-details__accordion .machine-details__accordion__content,
.machine-details__accordion .accordion-content-wrapper {
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  padding-top: 12px;
  padding-bottom: 12px;
}
.machine-details__accordion .accordion-title-wrapper {
  cursor: default;
}

/* FAQ accordion on home — open the FIRST item by default so visitors and
   crawlers see at least one answer. */
.faq-section__faq-accordion .accordion-item:first-child
  .accordion-content-wrapper {
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
}

/* About-us "Our DNA" accordion — same treatment, render expanded */
.about-section .brxe-accordion-nested .accordion-content-wrapper,
.how-works__body-inner .accordion-content-wrapper {
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
}

/* Decorative blobs - keep them in the back. Defensive z-index discipline. */
.cricle-dec-green,
.cricle-dec-green-two,
.circle-white-decor {
  z-index: 0 !important;
  pointer-events: none;
}
section .service-section__content,
section .founders__inner,
section .instagram-feed__content,
section .about-us .service-section__content {
  position: relative;
  z-index: 2;
}


/* =========================================================================
   G. SERVICES / FR HOME 404 FALLBACK STYLING
   When the static server returns its default directory listing or 404 stub
   for /services/ or /fr/, at least make it dark-themed so it doesn't flash
   white against the rest of the site. (Real fix is to create the HTML.)
   ========================================================================= */
body:not(:has(header#brx-header)):not(:has(.brxe-section)) {
  background: var(--ymir-bg);
  color: var(--ymir-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Poppins,
               Roboto, sans-serif;
  padding: 48px;
  line-height: 1.6;
}
body:not(:has(header#brx-header)):not(:has(.brxe-section)) h1,
body:not(:has(header#brx-header)):not(:has(.brxe-section)) h2 {
  color: var(--ymir-accent);
  font-weight: 600;
}
body:not(:has(header#brx-header)):not(:has(.brxe-section)) a {
  color: var(--ymir-accent);
}

/* =========================================================================
   END OF FILE
   ========================================================================= */


/* === YMIR-BLOG-POLISH === */
/* -------------------------------------------------------------------------
   Y. BLOG POLISH
   - .ymir-blog-placeholder    -> gradient + title hero fallback
   - .ymir-post-meta           -> tighten the date / author / read-time row
   - .prose-style              -> readable typography for post body
   - .ymir-post-nav            -> previous / next post navigation
   ------------------------------------------------------------------------- */
.ymir-blog-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ymir-radius-lg, 16px);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(193,223,196,.18), transparent 60%),
    radial-gradient(140% 90% at 100% 100%, rgba(85,138,134,.35), transparent 55%),
    linear-gradient(135deg, #14181c 0%, #0e1114 55%, #1a1f24 100%);
  box-shadow: var(--ymir-shadow, 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25));
  isolation: isolate;
}
.ymir-blog-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.025) 0 2px,
      transparent 2px 16px
    );
  z-index: 0;
  pointer-events: none;
}
.ymir-blog-placeholder::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,223,196,.25), transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.ymir-blog-placeholder .ymir-blog-placeholder__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 24px 32px;
  font-family: "NeueHaasDisplay", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw + 0.5rem, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
  max-width: 90%;
}

/* Smaller variant on mini cards (.blog-media-content) */
.blog-media-content .ymir-blog-placeholder .ymir-blog-placeholder__title {
  font-size: clamp(1rem, 1.4vw + 0.5rem, 1.4rem);
  padding: 16px 20px;
}

/* Hero-single-post variant: match the existing rounded-top corners only */
.hero-single-post__media-feature .ymir-blog-placeholder {
  aspect-ratio: 3 / 2;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* -------------------------------------------------------------------------
   .ymir-post-meta - clean date / author / read-time row
   ------------------------------------------------------------------------- */
.ymir-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ymir-text-mute, #98a2b3);
}
.ymir-post-meta .ymir-post-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ymir-post-meta .ymir-post-meta__sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.ymir-post-meta .ymir-post-meta__item--date {
  color: var(--ymir-accent, #c1dfc4);
  font-weight: 600;
}
.ymir-post-meta .ymir-post-meta__item--author {
  color: var(--ymir-text-soft, #d1d5db);
}

/* -------------------------------------------------------------------------
   .prose-style - readable long-form typography for post body
   Applied to .single-post-content__post-content.
   ------------------------------------------------------------------------- */
.prose-style {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--ymir-text-soft, #d1d5db);
  font-size: 1.05rem;
  line-height: 1.75;
}
.prose-style p {
  margin: 0 0 1.1em;
}
.prose-style h2,
.prose-style h3,
.prose-style h4 {
  color: #ffffff;
  font-family: "NeueHaasDisplay", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1.8em 0 .6em;
  line-height: 1.25;
}
.prose-style h2 { font-size: 1.75rem; }
.prose-style h3 { font-size: 1.4rem; }
.prose-style h4 { font-size: 1.15rem; }
.prose-style a {
  color: var(--ymir-accent, #c1dfc4);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-style a:hover {
  color: #ffffff;
}
.prose-style ul,
.prose-style ol {
  padding-left: 1.5em;
  margin: 0 0 1.1em;
}
.prose-style li {
  margin: 0 0 .4em;
}
.prose-style blockquote {
  border-left: 3px solid var(--ymir-accent, #c1dfc4);
  padding: .25em 0 .25em 1em;
  margin: 1.4em 0;
  color: var(--ymir-text, #e7ebee);
  font-style: italic;
}
.prose-style figure {
  margin: 1.8em 0;
}
.prose-style figure img,
.prose-style figure picture img {
  border-radius: 12px;
  width: 100%;
  height: auto;
}
.prose-style figcaption {
  font-size: .85rem;
  color: var(--ymir-text-mute, #98a2b3);
  text-align: center;
  margin-top: .5em;
}
.prose-style code {
  background: rgba(255,255,255,.06);
  padding: 0 .4em;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}

/* -------------------------------------------------------------------------
   .ymir-post-nav - previous / next post links
   ------------------------------------------------------------------------- */
.ymir-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 0 24px;
}
.ymir-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--ymir-bg-2, #14181c);
  border: 1px solid var(--ymir-border, #1f2429);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ymir-text, #e7ebee);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ymir-post-nav__link:hover {
  transform: translateY(-2px);
  border-color: var(--ymir-accent-2, #6fbf73);
  background: #181e22;
}
.ymir-post-nav__direction {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ymir-text-mute, #98a2b3);
}
.ymir-post-nav__title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: #ffffff;
}
.ymir-post-nav__link--next {
  text-align: right;
  align-items: flex-end;
}
.ymir-post-nav__link--prev {
  text-align: left;
  align-items: flex-start;
}
.ymir-post-nav__placeholder {
  background: transparent;
  border: 1px dashed var(--ymir-border, #1f2429);
  opacity: .35;
}
@media (max-width: 640px) {
  .ymir-post-nav {
    grid-template-columns: 1fr;
  }
}
/* === END YMIR-BLOG-POLISH === */

/* === FINAL POLISH ADDITIONS === */

/* A. ABOUT PAGE TYPOGRAPHY */
.brxe-section .brxe-text-basic p,
.brxe-section .brxe-rich-text p,
.about-us p,
article.brxe-section p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #d1d5db;
}
.brxe-section h2.brxe-heading {
  font-size: 2.25rem;
  color: #f5f6f7;
}
.brxe-section h3.brxe-heading {
  font-size: 1.5rem;
  color: #f5f6f7;
}

/* B. FOOTER MIN-HEIGHT */
html, body {
  min-height: 100%;
}
body {
  background: #0a0c0e;
}
footer.ymir-footer-v2 {
  margin-top: auto;
}
/* Ensure pages flex to fill viewport without trailing dark space */
body > * {
  box-sizing: border-box;
}

/* C. MACHINE PRODUCT CARD POLISH */
.ymir-product-img-card {
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.ymir-product-img-card img {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}
.ymir-other-card:hover {
  border-color: #ff9500 !important;
  transform: translateY(-2px);
}

/* D. KPI HERO COUNTER */
.hero-about__counter, .brxe-counter {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: #ff9500 !important;
  line-height: 1.1 !important;
}
.hero-about__about-count-wrapper {
  position: relative;
  z-index: 2;
}

/* E. FAQ ACCORDION — open first FAQ by default */
.brxe-accordion-nested details:first-of-type[open],
.brxe-accordion-nested .accordion-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* F. LOCALE SWITCHER — make active language visible */
.wpml-ls-current-language a { color: #ff9500 !important; font-weight: 600; }


/* =========================================================================
   Z. GRACEFUL HIDES FOR UNRENDERED JS SECTIONS
   Appended 2026-06-03 - final cleanup pass.
   Purpose: hide elements that look broken when their hydrating JS never runs
            (Splide carousels, Bricks search modal, WPML dropdown, missing
             image stubs, empty sections, floating contact widget stub).
   ========================================================================= */

/* Hide totally empty <section> wrappers (no children, just JS placeholder) */
.brxe-section:empty { display: none; }

/* Splide sliders that never initialize: flatten them into a wrapped row
   so slides are visible side-by-side instead of stacking under a 0-height
   track. */
.brxe-slider-nested:not(.splide--rendered) { gap: 16px; }
.brxe-slider-nested:not(.splide--rendered) .splide__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  transform: none !important;
}
.brxe-slider-nested:not(.splide--rendered) .splide__slide {
  width: auto !important;
  opacity: 1 !important;
}

/* Hide search modal placeholder if it leaks into page flow (Bricks search
   widget only becomes interactive once JS toggles data-search-active). */
.brxe-search:not([data-search-active]) { display: none; }

/* Hide WPML language switcher dropdown leftover (the sub-menu would otherwise
   render as a static list with no hover behavior). */
.wpml-ls-sub-menu { display: none !important; }

/* Hide any <img> with no usable src so the browser does not render its
   broken-image placeholder icon. */
img:not([src]),
img[src=""] { display: none; }

/* Floating contact widget stub (no functional class found in current build,
   but rules are kept so future stub markup is suppressed automatically). */
.send-message,
.floating-contact,
.brxe-contact-floating { display: none !important; }

/* === END Z. GRACEFUL HIDES === */