/* Theme A "dark cinematic" (spec: _design/2026-11-09-theme-a-design.md).
   Loaded only on sites with "theme": "a". Every rule is scoped to body.theme-a and overrides
   the Bricks CSS in site.css by specificity; site.css itself is never edited. */

/* ---------- tokens ---------- */
body.theme-a {
  --ta-base: #07080a;
  --ta-s1: #0e1014;
  --ta-s2: #14171c;
  --ta-text: #f2f4f7;
  --ta-body: #c9ced6;
  --ta-muted: #9aa0a6;
  --ta-line: rgba(255, 255, 255, .10);
  --ta-line-2: rgba(255, 255, 255, .16);
  --ta-glass: rgba(255, 255, 255, .045);
  --ta-red: #ab0006;
  --ta-red-hi: #d0021b;
  --ta-red-soft: #ff5a66;
  --ta-r: 14px;
  --ta-ease: cubic-bezier(.2, .7, .2, 1);
  background: var(--ta-base);
  color: var(--ta-body);
}

/* ---------- base typography on dark ---------- */
body.theme-a :is(.section__heading, .ruggedfaq__heading, .WhyRugged__heading, .cta__heading,
  .card-WhyRugged__heading, .fb-heading-three__heading, .productfaq__question, .productfaq__question *) {
  color: var(--ta-text);
  letter-spacing: -.02em;
}
body.theme-a :is(.ruggedfaq__description, .ruggedfaq__description p, .WhyRugged__description,
  .card-WhyRugged__description, .cta__description, .productfaq__answer, .productfaq__answer p,
  .productfaq__answer-content, .Industries__description, .rb-glance__intro) {
  color: var(--ta-body);
}
/* in-text links only; card product names stay white */
body.theme-a :is(.ruggedfaq__description, .productfaq__answer, .card-WhyRugged__description, .cta__description) a:not([class]) { color: var(--ta-red-soft); }

/* short red rule above the main section headings */
body.theme-a :is(.ruggedfaq__heading, .WhyRugged__heading, .rb-glance__heading, .Industries__heading)::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  margin: 0 0 18px;
  background: linear-gradient(90deg, var(--ta-red-hi), transparent);
}
body.theme-a :is(.ruggedfaq__heading, .rb-glance__heading, .Industries__heading)::before { margin-left: auto; margin-right: auto; }

/* ---------- 1. header: frosted bar once scrolled ---------- */
body.theme-a #brx-header .brxe-section.header {
  position: fixed;
  left: 0;
  right: 0;
  transition: background-color .35s var(--ta-ease), backdrop-filter .35s var(--ta-ease), box-shadow .35s var(--ta-ease);
}
body.theme-a #brx-header.is-scrolled .brxe-section.header {
  background: rgba(7, 8, 10, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--ta-line);
}
/* scrolled: shrink bar 141px -> ~90px (scale the background-image logo) */
body.theme-a #brx-header .brxe-section.header { transition: padding .35s var(--ta-ease), background-color .35s var(--ta-ease), box-shadow .35s var(--ta-ease); }
body.theme-a #brx-header .main-nav__container { transition: height .35s var(--ta-ease); }
body.theme-a #brx-header .nav-astute__logo { transform-origin: left center; transition: transform .35s var(--ta-ease); }
body.theme-a #brx-header.is-scrolled .brxe-section.header { padding-top: 6px; padding-bottom: 6px; }
body.theme-a #brx-header.is-scrolled .main-nav__container { height: 76px; }
body.theme-a #brx-header.is-scrolled .nav-astute__logo { transform: scale(.66); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.theme-a #brx-header.is-scrolled .brxe-section.header { background: rgba(7, 8, 10, .96); }
}

/* ---------- 2. hero ---------- */
/* the section is already position:relative + flex (Bricks); the image strip (.-fb-infinite-bn-03__bg) is an
   absolute .brxe-container at z-index -1 and must NOT be touched, so only the text container is lifted */
body.theme-a .fb-infinite-bn-03 { overflow: hidden; isolation: isolate; }
body.theme-a .fb-infinite-bn-03::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(171, 0, 6, .38), transparent 70%);
  animation: ta-drift 9s ease-in-out infinite alternate;
}
body.theme-a .fb-infinite-bn-03::before {
  /* bottom fade so the hero melts into the page */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(transparent, var(--ta-base));
}
body.theme-a .fb-infinite-bn-03 > .fb-hero-autoplay__content { position: relative; z-index: 2; }
@keyframes ta-drift { from { transform: translate(-14%, -6%); } to { transform: translate(12%, 8%); } }

body.theme-a .fb-hero-autoplay__title {
  background: linear-gradient(92deg, #ffffff 0%, #dfe2e6 55%, #ff5a66 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.025em;
  text-shadow: none;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .55));
}
/* Bricks interactions hide the hero text on load ([data-interaction-hidden-on-load], later .brx-animated) until
   bricks.min.js runs, so without JS the headline is invisible on every microsite. Theme A has its own rise-in,
   so release Bricks' hold. */
body.theme-a .fb-infinite-bn-03 :is([data-interaction-hidden-on-load], .brx-animated) { opacity: 1 !important; visibility: visible !important; }
body.theme-a .fb-hero-autoplay__accent { color: var(--ta-muted); letter-spacing: .18em; text-transform: uppercase; font-size: .55em; font-weight: 600; }
body.theme-a .fb-hero-autoplay__intro { color: var(--ta-text); }
html.js-motion body.theme-a :is(.fb-hero-autoplay__accent, .fb-hero-autoplay__title, .fb-hero-autoplay__intro, .rq-hero) {
  animation: ta-rise .9s var(--ta-ease) both;
}
html.js-motion body.theme-a .fb-hero-autoplay__title { animation-delay: .08s; }
html.js-motion body.theme-a .fb-hero-autoplay__intro { animation-delay: .18s; }
html.js-motion body.theme-a .rq-hero { animation-delay: .28s; }
@keyframes ta-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* buttons */
body.theme-a .rq-btn--primary {
  background: linear-gradient(180deg, var(--ta-red-hi), var(--ta-red));
  border-color: transparent;
  animation: ta-pulse 2.8s ease-out infinite;
  transition: transform .25s var(--ta-ease), filter .25s;
}
body.theme-a .rq-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
body.theme-a .rq-btn--ghost {
  background: rgba(255, 255, 255, .06);
  border-color: var(--ta-line-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .25s, background-color .25s;
}
body.theme-a .rq-btn--ghost:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1); }
@keyframes ta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(208, 2, 27, .55); }
  70% { box-shadow: 0 0 0 14px rgba(208, 2, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(208, 2, 27, 0); }
}

/* ---------- 3. client logos ---------- */
body.theme-a .clients { background: var(--ta-base); }
body.theme-a .clients .section__heading { color: var(--ta-text); }
body.theme-a .clients__logo-list-container {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* logo files have white or coloured backgrounds, so no filter trick works for all of them:
   show them on light chips instead, greyscale until hover */
body.theme-a .clients__logo-wrapper {
  background: #fff; /* must match the logo files' own white, or their edges show */
  border-radius: 12px;
  padding: 10px 18px;
  opacity: .82;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: opacity .3s, transform .3s var(--ta-ease);
}
body.theme-a .clients__logo { filter: grayscale(1); transition: filter .3s; }
body.theme-a .clients__logo-wrapper:hover { opacity: 1; transform: translateY(-2px); }
body.theme-a .clients__logo-wrapper:hover .clients__logo { filter: none; }

/* ---------- 4. intro + guide ---------- */
/* intro + guide only (FAQ reuses .ruggedfaq__description in two columns) */
body.theme-a .ruggedfaq__container { max-width: min(980px, 100%); } /* keep Bricks' 100% cap or phones overflow */
body.theme-a .ruggedfaq__container > .ruggedfaq__description { max-width: min(72ch, 100%); margin-left: auto; margin-right: auto; }

/* ---------- 5. featured product grid ---------- */
body.theme-a .rugged-grid-featured { background: var(--ta-base); }
body.theme-a .rugged-grid-contenthp__intro {
  background: radial-gradient(120% 90% at 20% 10%, var(--ta-red-hi), var(--ta-red) 45%, #5a0003);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  border-radius: var(--ta-r);
}
body.theme-a .rugged-grid__card-light {
  border-radius: var(--ta-r);
  border: 1px solid var(--ta-line);
  overflow: hidden;
  transition: transform .35s var(--ta-ease), box-shadow .35s var(--ta-ease), border-color .35s;
}
body.theme-a .rugged-grid__card-light:hover { transform: translateY(-6px); border-color: rgba(208, 2, 27, .75); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(208, 2, 27, .35), 0 0 28px rgba(208, 2, 27, .18); }
body.theme-a .rugged-grid__card-light img { transition: transform .6s var(--ta-ease); }
body.theme-a .rugged-grid__card-light:hover img { transform: scale(1.04); }
/* near-solid: a blur over the white product photo reads as murky grey */
body.theme-a .rugged-grid__heading { background: rgba(9, 10, 13, .9); border: 1px solid var(--ta-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
body.theme-a .rugged-grid__heading .fb-heading-three__subheading { color: var(--ta-red-soft); }
body.theme-a .rugged-grid__heading :is(.fb-heading-three__heading, .fb-heading-three__heading a) { color: var(--ta-text); }
/* hover fill over a white photo: near-opaque */
body.theme-a .rugged-grid__fill { background: linear-gradient(180deg, rgba(10, 11, 14, .95), rgba(26, 5, 8, .97)); }
/* card hover panel */
body.theme-a .rugged-grid__card-light:is(:hover, .active, :focus-within) .rugged-grid__fill { opacity: 1; }
body.theme-a .fb-heading-three__subheading { text-transform: none; }
body.theme-a .rugged-grid__hide { padding: 0 22px 22px; text-align: left; align-items: stretch; }
body.theme-a .rugged-grid__hide > div:first-child { display: flex; flex-direction: column; gap: 10px; }
body.theme-a .rugged-grid__hide ul { margin: 0; padding: 0; }
body.theme-a .rugged-grid__hide li .content { display: flex; gap: 8px; align-items: flex-start; padding: 0; }
body.theme-a .rugged-grid__hide li .icon { flex: 0 0 auto; margin: 0; color: var(--ta-red-hi); font-size: 15px; line-height: 1.4; }
body.theme-a .rugged-grid__hide li .title { text-transform: none; font-size: 14.5px; line-height: 1.45; font-weight: 500; letter-spacing: 0; color: #e9ecef; }
body.theme-a .rugged-grid__btnwrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
body.theme-a .rugged-grid__btnwrapper > a { width: auto !important; min-height: 46px; margin: 0 !important; padding: 0 14px !important; display: flex; align-items: center; justify-content: center; border-radius: 10px !important; font-size: 15px !important; font-weight: 600; line-height: 1.1; text-align: center; }
body.theme-a .rugged-grid__btnwrapper .fb-btn { background: var(--ta-red) !important; border: 1px solid var(--ta-red) !important; color: #fff !important; }
body.theme-a .rugged-grid__btnwrapper .fb-btn:hover { background: var(--ta-red-hi) !important; border-color: var(--ta-red-hi) !important; }
body.theme-a .rugged-grid__btnwrapper .rq-card-btn { background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
body.theme-a .rugged-grid__btnwrapper .rq-card-btn:hover { background: #fff; border-color: #fff; color: #0b0c0f; }

/* ---------- 6. why-cards ---------- */
body.theme-a .WhyRugged { background: var(--ta-base); }
body.theme-a .card-WhyRugged {
  background: var(--ta-glass);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r);
  transition: transform .35s var(--ta-ease), border-color .35s, background-color .35s;
}
body.theme-a .card-WhyRugged:hover { transform: translateY(-4px); border-color: rgba(208, 2, 27, .55); background: rgba(255, 255, 255, .06); }
body.theme-a .card-WhyRugged__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 24px;
  color: #fff;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 25%, var(--ta-red-hi), var(--ta-red) 60%, #5a0003);
  box-shadow: 0 0 24px rgba(208, 2, 27, .35);
}
body.theme-a .card-WhyRugged__heading { font-size: clamp(22px, 2vw, 28px); }

/* ---------- 7. industries ---------- */
body.theme-a .Industries { background: linear-gradient(180deg, var(--ta-base), var(--ta-s1) 30%, var(--ta-base)); }
/* Bricks styles the tabs by element ID (#brxe-xxxx), which no class selector can beat;
   !important is safe here because every rule is already scoped to body.theme-a */
body.theme-a .Industries__tab-title {
  background: var(--ta-glass) !important;
  border: 1px solid var(--ta-line-2) !important;
  border-radius: 999px !important;
  outline: none;
  transition: background-color .3s var(--ta-ease), border-color .3s, box-shadow .3s;
}
body.theme-a .Industries__tab-title, body.theme-a .Industries__tab-title * { color: var(--ta-body) !important; }
body.theme-a .Industries__tab-title:hover { border-color: rgba(255, 255, 255, .4) !important; }
body.theme-a .Industries__tab-title:hover, body.theme-a .Industries__tab-title:hover * { color: #fff !important; }
body.theme-a .Industries__tab-title.brx-open {
  background: linear-gradient(180deg, var(--ta-red-hi), var(--ta-red)) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 22px rgba(208, 2, 27, .35);
}
body.theme-a .Industries__tab-title.brx-open, body.theme-a .Industries__tab-title.brx-open * { color: #fff !important; }
body.theme-a .Industries__tab-title:focus-visible { box-shadow: 0 0 0 2px var(--ta-base), 0 0 0 4px var(--ta-red-soft); }
body.theme-a .card-Industries {
  background: var(--ta-glass);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r);
}
body.theme-a .Industries__tab-panel.brx-open .card-Industries { animation: ta-fade .45s var(--ta-ease) both; }
body.theme-a .card-Industries__img { border-radius: 12px; overflow: hidden; }
body.theme-a .card-Industries__featured-icon { color: var(--ta-red-soft); }
@keyframes ta-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 8. FAQ ---------- */
body.theme-a .productfaq { background: var(--ta-base); }
body.theme-a .productfaq__item {
  background: var(--ta-glass);
  border: 1px solid var(--ta-line);
  border-radius: 12px;
  transition: border-color .3s, background-color .3s;
}
body.theme-a .productfaq__item:hover { border-color: var(--ta-line-2); }
body.theme-a .productfaq__item.brx-open { border-color: rgba(208, 2, 27, .5); background: rgba(255, 255, 255, .06); }
body.theme-a .productfaq__answer-icon-wrapper { background: rgba(255, 255, 255, .08); color: #fff; }
body.theme-a .productfaq__answer-icon { transition: transform .3s var(--ta-ease); }
body.theme-a .productfaq__item.brx-open .productfaq__answer-icon { transform: rotate(45deg); color: var(--ta-red-soft); }
body.theme-a .single-productfaq__divider .line { border-color: var(--ta-line) !important; }

/* ---------- 9. range at a glance ---------- */
body.theme-a .rb-glance { background: linear-gradient(180deg, var(--ta-base), var(--ta-s1)); }
body.theme-a .rb-glance__tile {
  background: var(--ta-glass);
  border: 1px solid var(--ta-line);
  border-radius: 12px;
  overflow: hidden;
}
body.theme-a .rb-glance__tile::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ta-red-hi), rgba(208, 2, 27, .1));
}
body.theme-a .rb-glance__label { color: var(--ta-muted); letter-spacing: .12em; }

/* ---------- 10. CTA ---------- */
body.theme-a .cta { position: relative; overflow: hidden; background: var(--ta-s1); isolation: isolate; }
body.theme-a .cta::before {
  content: "";
  position: absolute;
  width: 70vw;
  height: 70vw;
  left: -20vw;
  top: -30vw;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(171, 0, 6, .32), transparent 70%);
  animation: ta-drift 11s ease-in-out infinite alternate;
}
body.theme-a .cta .tagline { color: var(--ta-red-soft); }
body.theme-a .cta__img { border: 1px solid var(--ta-line); overflow: hidden; }
body.theme-a .cta__img-wrapper:nth-child(1) .cta__img { animation: ta-float 6s ease-in-out infinite; }
body.theme-a .cta__img-wrapper:nth-child(2) .cta__img { animation: ta-float 6s ease-in-out -2s infinite; }
body.theme-a .cta__img-wrapper:nth-child(3) .cta__img { animation: ta-float 6s ease-in-out -4s infinite; }
@keyframes ta-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
body.theme-a .cta .fb-btn--outline { color: #fff; border-color: var(--ta-line-2); }

/* ---------- 11. footer ---------- */
body.theme-a .r-footer { background: var(--ta-base); position: relative; }
body.theme-a .r-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ta-red-hi), transparent); }

/* footer watermark */
body.theme-a .r-footer { overflow: hidden; isolation: isolate; }
body.theme-a .r-footer__container { position: relative; z-index: 1; padding-top: 72px; }
body.theme-a .r-footer__divider:first-child { display: none; }
body.theme-a .r-footer__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); width: 118vw; max-width: none; margin: 0; padding: 0; z-index: -1; pointer-events: none; opacity: .07; filter: grayscale(1) brightness(1.6); }
body.theme-a .r-footer__logo img { width: 100%; height: auto; max-width: none; }
/* legal notice: last line of the page */
body.theme-a .rq-legal--bottom { background: #060709; padding: 22px 20px; border-top: 1px solid var(--ta-line); color: #8a9097; }
body.theme-a .rq-legal--bottom a { color: #c9cdd2; }
@media (max-width: 767px) { body.theme-a .r-footer__container { padding-top: 40px; } body.theme-a .r-footer__logo { width: 150vw; transform: translate(-50%, -75%); } body.theme-a .rq-legal--bottom { padding: 20px 84px 26px 20px; text-align: left; } }

/* ---------- 12. enquiry pop-up ---------- */
body.theme-a dialog.rq {
  background: rgba(14, 16, 20, .92);
  border: 1px solid var(--ta-line-2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(208, 2, 27, .15);
}
body.theme-a dialog.rq::backdrop { background: rgba(3, 3, 5, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ---------- scroll reveal (only when motion.js runs) ---------- */
html.js-motion body.theme-a [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ta-ease), transform .5s var(--ta-ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html.js-motion body.theme-a [data-reveal].is-in { opacity: 1; transform: none; }
/* product cards: keep the hover lift working after the reveal */
html.js-motion body.theme-a .rugged-grid__card-light[data-reveal].is-in { transition: opacity .5s var(--ta-ease), transform .35s var(--ta-ease), box-shadow .35s var(--ta-ease), border-color .35s; transition-delay: 0s; }

/* ---------- reduced motion: everything still, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  body.theme-a *, body.theme-a *::before, body.theme-a *::after {
    animation: none !important;
    transition: none !important;
  }
  html.js-motion body.theme-a [data-reveal] { opacity: 1; transform: none; }
  body.theme-a .rugged-grid__card-light:hover,
  body.theme-a .card-WhyRugged:hover,
  body.theme-a .rq-btn--primary:hover { transform: none; }
  body.theme-a .rugged-grid__card-light:hover img { transform: none; }
}