/* =============================================================================
   RAS Cores — component styles
   -----------------------------------------------------------------------------
   Depends on ras-tokens (and therefore on ras-root and the parent handles).
   Everything here is token-driven: colours ride var(--ras-*), never literals.

   Scope: surfaces the atomic Global Class layer cannot own — child-theme markup
   (the theme toggle) and classic-widget/plugin surfaces.
============================================================================= */

/* -----------------------------------------------------------------------------
   Headline highlight spans
   -----------------------------------------------------------------------------
   The house heading rule (04): a heading may highlight ONE key phrase, in
   ras-red-highlight or copper. Authored as an inline <span> inside html-v3
   (a sanctioned inline tag), coloured here rather than with an inline style.

   The span carries NO class: html-v3 sanitises with wp_kses `'span' => []`, so
   any attribute is stripped at save time. The highlight is therefore targeted
   STRUCTURALLY — a heading's only span is its highlight.

   The reds are theme-invariant, so this is safe on any surface, including the
   dark image-backed heroes.
----------------------------------------------------------------------------- */

.elementor .ras-display span,
.elementor .ras-h1 span,
.elementor .ras-h2 span,
.elementor .ras-h2-sm span,
.elementor .ras-h3-card span {
  color: var(--ras-red-highlight);
}

/* The CTA banner's highlight is COPPER, not red (03 ⚠ — a documented difference
   from headline highlights). The banner sits on an image with a dark overlay in
   BOTH modes, so it takes the theme-invariant on-dark copper rather than
   --ras-copper, which would drop to #8a6540 in light mode on a dark surface. */
.elementor .ras-cta-banner .ras-h2 span,
.elementor .ras-cta-banner .ras-h1 span {   /* banner headline moved to the ras-h1 scale */
  color: var(--ras-copper-on-dark);
}

/* Opt-in copper highlight on a specific headline (e.g. /buy-cores hero,
   "The Core Supplier Your <Production Line> Depends On"). */
.elementor .ras-hl-copper-ctx span {
  color: var(--ras-copper-on-dark);
}

/* -----------------------------------------------------------------------------
   Theme toggle  (includes/theme-toggle.php)
   -----------------------------------------------------------------------------
   Matches the CURRENT prototype's ThemeToggleButton: a fixed 44x44 circle in the
   bottom-right, card background, 1px border that goes copper on hover, copper
   icon, card shadow. It shows the icon for the ACTIVE PREFERENCE, not the
   resolved theme, so "system" reads as its own state.

   `data-ras-pref` is written by the toggle script on load and on every change.
----------------------------------------------------------------------------- */

.ras-theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ras-border);
  border-radius: 9999px;
  background: var(--ras-bg-card);
  box-shadow: var(--ras-shadow);
  color: var(--ras-copper);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ras-theme-toggle:hover { border-color: var(--ras-copper); }

.ras-theme-toggle:focus-visible {
  outline: 2px solid var(--ras-copper);
  outline-offset: 2px;
}

.ras-theme-toggle .ras-theme-toggle__icon { display: none; line-height: 0; }

/* Default (no data-ras-pref yet, or system): the monitor. */
.ras-theme-toggle .ras-theme-toggle__icon--system { display: inline-flex; }

html[data-ras-pref="dark"] .ras-theme-toggle .ras-theme-toggle__icon--system,
html[data-ras-pref="light"] .ras-theme-toggle .ras-theme-toggle__icon--system { display: none; }

html[data-ras-pref="dark"] .ras-theme-toggle .ras-theme-toggle__icon--moon { display: inline-flex; }
html[data-ras-pref="light"] .ras-theme-toggle .ras-theme-toggle__icon--sun { display: inline-flex; }

/* -----------------------------------------------------------------------------
   Mode-dependent assets
   -----------------------------------------------------------------------------
   Both logos ship (06-assets.md); the inactive one is hidden per mode rather
   than swapped by JS, so it is correct before first paint and with JS off.
----------------------------------------------------------------------------- */

.ras-logo-dark { display: none; }
.ras-logo-light { display: block; }

html[data-ras-theme="dark"] .ras-logo-dark { display: block; }
html[data-ras-theme="dark"] .ras-logo-light { display: none; }

@media (prefers-color-scheme: dark) {
  html:not([data-ras-theme="light"]) .ras-logo-dark { display: block; }
  html:not([data-ras-theme="light"]) .ras-logo-light { display: none; }
}

/* -----------------------------------------------------------------------------
   History timeline  (02: atomic composition, no plugin)
   -----------------------------------------------------------------------------
   The element tree carries meaning (rows + cards); the spine, the alternating
   placement and the dots are decoration and live here. Mobile collapses to a
   single left spine with one media query rather than a second element tree.
----------------------------------------------------------------------------- */

.elementor .ras-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  row-gap: 40px;
  width: 100%;
}

/* The spine. */
.elementor .ras-timeline::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  width: 2px;
  background: var(--ras-border-subtle);
}

.elementor .ras-timeline-row {
  display: flex;
  position: relative;
}

/* Alternate sides: odd left, even right. */
.elementor .ras-timeline-row:nth-child(odd) {
  grid-column: 1;
  justify-content: flex-end;
  padding-inline-end: 32px;
}
.elementor .ras-timeline-row:nth-child(even) {
  grid-column: 3;
  justify-content: flex-start;
  padding-inline-start: 32px;
}

/* Accent edge, mirrored per side (prototype: border-r-4 / border-l-4 #840000). */
.elementor .ras-timeline-row:nth-child(odd) .ras-timeline-card {
  border-inline-end: 4px solid var(--ras-maroon);
}
.elementor .ras-timeline-row:nth-child(even) .ras-timeline-card {
  border-inline-start: 4px solid var(--ras-maroon);
}

.elementor .ras-timeline-card { max-width: 520px; }

/* Dot on the spine, aligned to each card's top. */
.elementor .ras-timeline-row::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: var(--ras-maroon);
}
.elementor .ras-timeline-row:nth-child(odd)::after  { inset-inline-end: -37px; }
.elementor .ras-timeline-row:nth-child(even)::after { inset-inline-start: -37px; }

/* Mobile / tablet: one column, spine on the left. */
@media (max-width: 1024px) {
  .elementor .ras-timeline { grid-template-columns: 2px 1fr; }
  .elementor .ras-timeline::before { grid-column: 1; }
  .elementor .ras-timeline-row:nth-child(odd),
  .elementor .ras-timeline-row:nth-child(even) {
    grid-column: 2;
    justify-content: flex-start;
    padding-inline: 32px 0;
  }
  .elementor .ras-timeline-row:nth-child(odd) .ras-timeline-card,
  .elementor .ras-timeline-row:nth-child(even) .ras-timeline-card {
    border-inline-end: 0;
    border-inline-start: 4px solid var(--ras-maroon);
  }
  .elementor .ras-timeline-row:nth-child(odd)::after,
  .elementor .ras-timeline-row:nth-child(even)::after {
    inset-inline-start: -37px;
    inset-inline-end: auto;
  }
  .elementor .ras-timeline-card { max-width: none; }
}

/* -----------------------------------------------------------------------------
   Bullet rows (Technology app cards)
   -----------------------------------------------------------------------------
   The widget catalog demotes `icon-list`, so a bullet is structure + CSS: a
   small marker and a paragraph, aligned to the first text line.
----------------------------------------------------------------------------- */

.elementor .ras-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.elementor .ras-bullet-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 9px;               /* optically centres on the first line */
  border-radius: 9999px;
  background: var(--ras-maroon);
}

.elementor .ras-bullet p { margin: 0; }

/* -----------------------------------------------------------------------------
   Hub and spoke  (About — "Service Is the Difference", A2 option a)
   -----------------------------------------------------------------------------
   Four corner cards around a centre hub. Source order is
   spoke1, spoke2, HUB, spoke3, spoke4 so the desktop corner grid needs no
   wrapper and the mobile stack falls out naturally.

   The animated dashed connector layer is deliberately absent — it is the only
   grant-gated part of this diagram (08 Advanced #2).
----------------------------------------------------------------------------- */

.elementor .ras-hubspoke {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  width: 100%;
}

.elementor .ras-hubspoke > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.elementor .ras-hubspoke > *:nth-child(2) { grid-column: 3; grid-row: 1; }
.elementor .ras-hubspoke > *:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } /* hub */
.elementor .ras-hubspoke > *:nth-child(4) { grid-column: 1; grid-row: 2; }
.elementor .ras-hubspoke > *:nth-child(5) { grid-column: 3; grid-row: 2; }

.elementor .ras-hubspoke .ras-hub {
  text-align: center;
  align-items: center;
  border-color: var(--ras-maroon);
}

@media (max-width: 1024px) {
  .elementor .ras-hubspoke {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .elementor .ras-hubspoke > *:nth-child(1),
  .elementor .ras-hubspoke > *:nth-child(2),
  .elementor .ras-hubspoke > *:nth-child(3),
  .elementor .ras-hubspoke > *:nth-child(4),
  .elementor .ras-hubspoke > *:nth-child(5) {
    grid-column: 1;
    grid-row: auto;
  }
  /* Hub leads on small screens, matching the prototype's mobile order. */
  .elementor .ras-hubspoke > *:nth-child(3) { order: -1; }
}

/* -----------------------------------------------------------------------------
   Inline network map  (About — Rhode Island Roots, A3 static route)
----------------------------------------------------------------------------- */

/* Scoped theme tokens — NetworkMap.tsx light values (mapBg #dce8f0, land at
   0.22/0.55 alpha, reach #8a6540, label #1a1e1e, dot rings in the canvas colour)
   with the dark set re-declared below. */
.ras-network-map {
  --ras-map-bg: #dce8f0;
  --ras-map-land: rgba(132, 0, 0, 0.22);
  --ras-map-land-stroke: rgba(132, 0, 0, 0.55);
  --ras-map-reach: #8a6540;
  --ras-map-label: #1a1e1e;
  --ras-map-dot-stroke: #dce8f0;
}
html[data-ras-theme="dark"] .ras-network-map {
  --ras-map-bg: #1a1a1a;
  --ras-map-land: rgba(132, 0, 0, 0.28);
  --ras-map-land-stroke: rgba(132, 0, 0, 0.75);
  --ras-map-reach: #d4a574;
  --ras-map-label: #ffffff;
  --ras-map-dot-stroke: #ffffff;
}
@media (prefers-color-scheme: dark) {
  html:not([data-ras-theme="light"]) .ras-network-map {
    --ras-map-bg: #1a1a1a;
    --ras-map-land: rgba(132, 0, 0, 0.28);
    --ras-map-land-stroke: rgba(132, 0, 0, 0.75);
    --ras-map-reach: #d4a574;
    --ras-map-label: #ffffff;
    --ras-map-dot-stroke: #ffffff;
  }
}

/* rounded-2xl + border + 16:9 capped at 460px; the canvas colour fills any
   letterbox around the `meet`-scaled SVG, as the prototype's div does. */
.elementor .ras-network-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  border-radius: 16px;
  border: 1px solid var(--ras-border);
  background: var(--ras-map-bg);
  overflow: hidden;
  line-height: 0;
  transition: background-color 0.3s;
}

.elementor .ras-network-map svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ras-network-map .ras-map-bg    { fill: var(--ras-map-bg); }
.ras-network-map .ras-map-land  { fill: var(--ras-map-land); stroke: var(--ras-map-land-stroke); }
.ras-network-map .ras-map-reach { stroke: var(--ras-map-reach); }
.ras-network-map .ras-map-dot   { stroke: var(--ras-map-dot-stroke); }

/* The prototype renders the diagram on a fixed 1200x700 canvas (HubAndSpoke.tsx),
   which gives the corner cards room to breathe. The static build is a grid, so
   the equivalent is a floor height on desktop; it collapses on smaller screens. */
@media (min-width: 1025px) {
  .elementor .ras-hubspoke { min-height: 700px; }
  .elementor .ras-hubspoke > * { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   Primary nav  (classic nav-menu widget, styled by class not __globals__)
   -----------------------------------------------------------------------------
   The __globals__ colour refs resolved to Elementor's default accent — the nav
   rendered GREEN. Principle 14 puts classic-widget look-and-feel in child-theme
   CSS keyed to a prefixed class, which is also immune to that whole problem.

   Prototype: font-heading uppercase 15px tracking-wider, gap-8 (32px),
   active = copper, idle = text-heading, hover = copper, no underline pointer.
----------------------------------------------------------------------------- */

.ras-nav .elementor-nav-menu,
.ras-nav .elementor-nav-menu--main > ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  align-items: center;
}

.ras-nav .elementor-nav-menu a.elementor-item {
  padding: 0;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ras-text-heading);
  fill: var(--ras-text-heading);
  transition: color 0.2s ease;
}

/* Beat the widget's own pointer/hover defaults, which are what turned green. */
/* Narrow desktop (iPad Pro landscape is 1032px): logo + 696px nav + Sign In
   overflowed the row and clipped the pill. Tighten the nav until 1280px. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .ras-nav .elementor-nav-menu,
  .ras-nav .elementor-nav-menu--main > ul { gap: 20px; }
  .ras-nav .elementor-nav-menu a.elementor-item { font-size: 14px; }
  .elementor .ras-hdr-navgrp { gap: 24px; }
}

.ras-nav .elementor-nav-menu a.elementor-item:hover,
.ras-nav .elementor-nav-menu a.elementor-item:focus,
.ras-nav .elementor-nav-menu a.elementor-item.elementor-item-active,
.ras-nav .elementor-nav-menu a.elementor-item.highlighted {
  color: var(--ras-copper);
  background: transparent;
}

/* No pointer decoration — the prototype marks the active item by colour alone. */
.ras-nav .elementor-nav-menu a.elementor-item:before,
.ras-nav .elementor-nav-menu a.elementor-item:after {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Header chrome sizing
----------------------------------------------------------------------------- */

/* The wordmark is a fixed 22px tall, auto width — never full-bleed.
   NOTE the selector: an atomic e-image puts the classes ON the <img> itself, so
   `.ras-logo-light img` matches nothing. */
.elementor img.ras-logo-light,
.elementor img.ras-logo-dark {
  /* 20px of glyph. The master logo files (594/595) are tight-cropped — the old
     22px box held only ~16px of glyph; Joe asked for it bigger (2026-10-15). */
  height: 20px !important;
  width: auto !important;
  max-width: none !important;
}

/* Per-mode swap, re-declared for the img element (the generic rules target a
   wrapper). */
.elementor img.ras-logo-dark { display: none; }
.elementor img.ras-logo-light { display: block; }
html[data-ras-theme="dark"] .elementor img.ras-logo-dark { display: block; }
html[data-ras-theme="dark"] .elementor img.ras-logo-light { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-ras-theme="light"]) .elementor img.ras-logo-dark { display: block; }
  html:not([data-ras-theme="light"]) .elementor img.ras-logo-light { display: none; }
}

/* `white-space` is NOT in the atomic Style_Schema, so it is stripped from local
   styles at save time — the pill wrapped to two lines and overlapped the nav. */
.elementor .ras-signin {
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ras-signin:hover { opacity: 0.9; }

/* lucide LogIn glyph (16px, white) — Header.tsx carries it on both variants. */
.elementor .ras-signin::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' x2='3' y1='12' y2='12'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' x2='3' y1='12' y2='12'/></svg>") center / contain no-repeat;
}

/* Below lg the prototype swaps the pill for a 36px icon-only circle that sits
   immediately left of the hamburger (`lg:hidden flex items-center gap-3`). */
@media (max-width: 1024px) {
  .elementor .ras-hdr-navgrp:has(.ras-signin) { margin-left: auto; margin-right: -12px; }
  .elementor .ras-signin {
    display: inline-flex !important;   /* the generator's tablet/mobile display:none predates this */
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0 !important;
    border-radius: 50%;
    font-size: 0 !important;
    gap: 0;
  }
}

/* The nav must size to its content. Inside the header's flex row the widget was
   being shrunk to 514px while its own <ul> stayed 696px, so the menu overflowed
   and collided with the Sign In pill. */
.elementor .ras-nav,
.elementor .ras-nav .elementor-nav-menu--main,
.elementor .ras-nav nav {
  flex: 0 0 auto;
  width: auto;
}

/* Header row sizing.
   `flex: 0 0 auto` is NOT accepted by the atomic Style_Schema as a plain string —
   it was dropped at save, so the logo and nav groups each took half the row and
   the nav overflowed. Set here instead. */
.elementor .ras-hdr-logo,
.elementor .ras-hdr-navgrp {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Home hero canvas — the prototype's 110deg three-stop gradient
   (HeroSection.tsx). Token-driven, so it flips with the theme. A gradient
   overlay is expressible in the atomic background prop, but its stop shape is
   unverified; this is equivalent and readable. */
.elementor .ras-hero-gradient {
  background: linear-gradient(
    110deg,
    var(--ras-bg-elevated) 3%,
    var(--ras-bg-section) 25%,
    var(--ras-bg-page) 97%
  );
}

/* Image cards layer a BOTTOM-UP gradient over the flat overlay, which is what
   makes the copy legible against a bright photo
   (HeroSection.tsx: `bg-black/40` + `bg-gradient-to-t from-black/80 …`).
   The flat tint rides the background prop; this adds the directional half. */
.elementor .ras-img-card { position: relative; }

.elementor .ras-img-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* Keep the copy above the gradient. */
.elementor .ras-img-card > * { position: relative; z-index: 1; }

/* Story promo card media — the image sits at 40% opacity under a bottom-up fade
   to the CARD colour (StorySection.tsx: `bg-gradient-to-t from-[--ras-bg-card]/60`),
   so it reads as a texture inside the card, not a photo. */
.elementor .ras-story-media { position: relative; }
.elementor .ras-story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ras-bg-card) 60%, transparent), transparent);
  pointer-events: none;
}

/* =============================================================================
   ras-explode — Home "What We Buy" scrubbed pinned stage  (faithful port)
   -----------------------------------------------------------------------------
   HTML-widget markup under the recorded grant (STATE.md 2026-08-20). Geometry
   and choreography ported 1:1 from CarExplode.tsx: per-part origin points ON
   the car, an evenly-spaced radial ring (responsive radius), origin-tethered
   dashed lines that GROW with the cards, per-beat card highlighting, bottom-
   left display-size beat text, top-right gradient rail.

   The canvas FLIPS WITH THE THEME (#0a0a0a dark / #f0efeb light) via
   --ras-canvas-explode — the earlier "invariant dark" note was wrong.
   Positions/opacity/transform are driven per-frame by assets/js/ras-home.js;
   every colour rides var(--ras-*).
============================================================================= */

.ras-explode {
  position: relative;
  height: calc(100vh + var(--ras-pin-len, 500vh));
  background: var(--ras-canvas-explode);
}

.ras-explode-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Maroon radial glow behind the car — JS raises opacity with progress. */
.ras-explode-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--ras-explode-glow-base, 0.25);
  background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--ras-maroon) 0%, transparent 70%);
}

/* Car: flex-centred wrapper; JS writes opacity/transform/filter on the wrap. */
.ras-explode-carcenter {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ras-explode-carwrap {
  position: relative;
  width: 70vw;
  max-width: 900px;
}
.ras-explode-carwrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 50%, transparent 100%);
}

/* Logo overlay — above the car, unaffected by its blur. JS fades 40→60%. */
.ras-explode-logo {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.ras-explode-logo img {
  width: 220px;
  max-width: 25vw;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(132, 0, 0, 0.6));
}

/* Origin-tethered dashed lines (JS updates endpoints + opacity per frame). */
.ras-explode-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.ras-explode-line {
  stroke: var(--ras-copper);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0;
}

/* Copper origin dots on the car itself. */
.ras-explode-dot {
  position: absolute;
  z-index: 6;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--ras-copper);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ras-copper) 60%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* Part cards: small glass tiles, whole card a link. JS drives left/top per
   frame WITHOUT transition; scale/opacity ride a 0.5s transition (source). */
.ras-explode-card {
  position: absolute;
  z-index: 10;
  width: 160px;
  border-radius: 12px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background: var(--ras-explode-cardbg, rgba(0, 0, 0, 0.82));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 2px solid color-mix(in srgb, var(--ras-copper) 30%, transparent);
  transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.ras-explode-card-img {
  height: 90px;
  overflow: hidden;
}
.ras-explode-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.5s ease;
}
.ras-explode-card > span {
  display: block;
  padding: 6px 8px;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ras-text-heading);
  transition: color 0.5s ease;
}
/* Awaiting licensed art (Blocker #6b): label-only card. */
.ras-explode-card--noimg > span { padding: 14px 10px; }

/* Per-beat highlight. */
.ras-explode-card.ras-hl {
  border-color: var(--ras-copper);
  box-shadow: 0 0 20px color-mix(in srgb, var(--ras-copper) 50%, transparent),
              0 0 40px color-mix(in srgb, var(--ras-maroon) 30%, transparent);
}
.ras-explode-card.ras-hl > span { color: var(--ras-copper); }
.ras-explode-card.ras-hl img { opacity: 1; }

/* JS-off END FRAME: approximate ring positions; JS takes over immediately. */
.ras-explode-card--1 { left: 22%; top: 20%; opacity: 1; }
.ras-explode-card--2 { left: 60%; top: 12%; opacity: 1; }
.ras-explode-card--3 { left: 79%; top: 24%; opacity: 1; }
.ras-explode-card--4 { left: 82%; top: 62%; opacity: 1; }
.ras-explode-card--5 { left: 21%; top: 58%; opacity: 1; }
.ras-explode-card--6 { left: 62%; top: 82%; opacity: 1; }
.ras-explode-card--7 { left: 36%; top: 78%; opacity: 1; }

/* Top-left overline — dims once scrolling starts. */
.ras-explode-title {
  position: absolute;
  top: 32px;
  left: 64px;
  z-index: 20;
  margin: 0;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 400;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ras-copper);
  transition: opacity 0.5s ease;
}
.ras-explode--scrolled .ras-explode-title { opacity: 0.5; }

/* Vertical progress rail, top-right, maroon-to-copper gradient fill. */
.ras-explode-rail {
  position: absolute;
  top: 32px;
  right: 64px;
  z-index: 20;
  width: 6px;
  height: 200px;
  border-radius: 9999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ras-text-heading) 10%, transparent);
}
.ras-explode-rail-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;   /* end frame */
  border-radius: inherit;
  background: linear-gradient(to top, var(--ras-maroon), var(--ras-copper));
}

/* Beat text — BOTTOM-LEFT at display size (ScrollText). One active at a time,
   700ms fade+rise. The LAST beat carries ras-active in markup (end frame). */
.ras-explode-beats {
  position: absolute;
  left: 64px;
  bottom: 64px;
  z-index: 20;
  width: 35vw;
  max-width: 35vw;
  pointer-events: none;
}
.ras-explode-beat {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ras-explode-beat.ras-active {
  opacity: 1;
  transform: none;
}
.ras-explode-beat-title {
  margin: 0;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: clamp(1.75rem, 5.25vw, 4.875rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ras-text-heading);
}
.ras-explode-beat-sub {
  margin: 8px 0 0;
  font: 18px/1.5 "Inter", sans-serif;
  color: var(--ras-copper);
}

/* Scroll cue: text + mouse pill with a bouncing copper dot. */
.ras-explode-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font: 14px/1 "Inter", sans-serif;
  color: color-mix(in srgb, var(--ras-text-heading) 60%, transparent);
  transition: opacity 0.5s ease;
}
.ras-explode-cue--hidden { opacity: 0; }
.ras-explode-mouse {
  width: 20px;
  height: 32px;
  border: 2px solid color-mix(in srgb, var(--ras-text-heading) 30%, transparent);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
.ras-explode-mouse-dot {
  width: 4px;
  height: 8px;
  border-radius: 9999px;
  background: var(--ras-copper);
  animation: ras-cue-bounce 1s infinite;
}
@keyframes ras-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* -----------------------------------------------------------------------------
   Branching — the source flips to its grid fallback below 768px.
   Reduced motion collapses the pin; JS renders the end frame once.
----------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ras-explode { display: none; }
}

@media (min-width: 768px) {
  .elementor .ras-explode-fallback { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ras-explode { height: 100vh; }
  .ras-explode-cue { display: none; }
}

/* -----------------------------------------------------------------------------
   Icon tiles (benefit cards, supplier-type cards)
   -----------------------------------------------------------------------------
   Prototype: a 48x48 rounded-xl tile at 10% maroon holding a 24px lucide glyph
   in maroon. Glyphs are CSS masks (lucide path data as data-URIs), so the
   colour is a background-color riding var(--ras-maroon) — token-driven,
   no inline SVG, no e-svg schema risk.
----------------------------------------------------------------------------- */

.elementor .ras-icon-tile {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ras-maroon) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.elementor .ras-icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; }

.elementor .ras-icon {
  width: 24px;
  height: 24px;
  background-color: var(--ras-maroon);
  -webkit-mask: var(--ras-icon) center / contain no-repeat;
  mask: var(--ras-icon) center / contain no-repeat;
}

.elementor .ras-icon-tile--lg .ras-icon { width: 28px; height: 28px; }

.elementor .ras-icon--truck { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>"); }
.elementor .ras-icon--dollar-sign { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' x2='12' y1='2' y2='22'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>"); }
.elementor .ras-icon--clipboard-check { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='8' height='4' x='8' y='2' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='m9 14 2 2 4-4'/></svg>"); }
.elementor .ras-icon--package-check { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m16 16 2 2 4-4'/><path d='M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14'/><path d='m7.5 4.27 9 5.15'/><polyline points='3.29 7 12 12 20.71 7'/><line x1='12' x2='12' y1='22' y2='12'/></svg>"); }
.elementor .ras-icon--shield-check { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>"); }
.elementor .ras-icon--users { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.elementor .ras-icon--bar-chart-3 { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v16a2 2 0 0 0 2 2h16'/><path d='M18 17V9'/><path d='M13 17V5'/><path d='M8 17v-3'/></svg>"); }
.elementor .ras-icon--check-square { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>"); }
.elementor .ras-icon--layers { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/><path d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/><path d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/></svg>"); }
.elementor .ras-icon--wrench { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>"); }
.elementor .ras-icon--package { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7.5 4.27 9 5.15'/><path d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/><path d='M12 22V12'/><polyline points='3.29 7 12 12 20.71 7'/></svg>"); }

/* Card-styled category chips (supplier pages, prototype):
   px-5 py-2.5 rounded-full bg-card border shadow, 13px heading font. */
.elementor .ras-chip-card {
  background: var(--ras-bg-card);
  border: 1px solid var(--ras-border);
  box-shadow: var(--ras-shadow);
}

/* Flex sizing utilities. `flex` is NOT a Style_Schema prop — including it in a
   local style gets the WHOLE style dropped at save (§10: invalid styles drop
   with a logged warning), which silently reverts the element to its base
   display. Size flex children with these classes instead. */
.elementor .ras-flex-1 { flex: 1 1 0%; min-width: 0; }
.elementor .ras-flex-none { flex: 0 0 auto; }

/* .e-div-block-base ships min-width:30px, which inflates the 6px bullet dots
   into pills. */
.elementor .ras-bullet-dot {
  width: 6px !important;
  min-width: 6px !important;
  height: 6px !important;
  padding: 0 !important;   /* border-box: the base 10px padding made a 6px dot 20px */
}

/* Burger — its flex wrapper shrank below the anchor's padding box at 390px and
   pushed the button past the viewport (10px page overflow). Icon-only styling
   per the prototype: bare glyph, no fill. */
.elementor .ras-burger { flex: 0 0 auto; }
.elementor .ras-burger .elementor-button {
  background: transparent;
  padding: 8px;
  color: var(--ras-text-heading);
  fill: var(--ras-text-heading);
}

/* -----------------------------------------------------------------------------
   Product Line single  (CPT detail — shortcode-rendered pieces)
----------------------------------------------------------------------------- */

.ras-pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ras-pl-chip {
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--ras-border);
  background: var(--ras-bg-surface);
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ras-text-heading);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ras-pl-chip:hover { border-color: var(--ras-copper); color: var(--ras-copper); }

/* Standards accordion — native <details>, styled as the prototype's cards. */
.ras-std-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
}
@media (max-width: 1024px) { .ras-std-grid { grid-template-columns: 1fr; } }

.ras-std-card {
  background: var(--ras-bg-card);
  border: 1px solid var(--ras-border-subtle);
  border-radius: var(--ras-radius-card);
  box-shadow: var(--ras-shadow);
  overflow: hidden;
}
.ras-std-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ras-text-heading);
}
.ras-std-card summary::-webkit-details-marker { display: none; }
.ras-std-chev {
  width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 2px solid var(--ras-copper);
  border-bottom: 2px solid var(--ras-copper);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.ras-std-card[open] .ras-std-chev { transform: rotate(225deg); }

.ras-std-body { padding: 0 24px 20px; }
.ras-std-body ul { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ras-std-body li {
  position: relative;
  padding-left: 26px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ras-text-body);
}
.ras-std-body li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 16px; height: 16px;
  background-color: var(--ras-maroon);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") center / contain no-repeat;
}
.ras-std-varlabel {
  margin: 4px 0 8px;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ras-copper);
}
.ras-std-note { margin: 8px 0 0; font-size: 14px; color: var(--ras-copper); }
.ras-std-disclaimer { margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--ras-text-faint); }
.ras-std-empty p { font-size: 16px; color: var(--ras-text-body); }

/* Other-categories tiles */
.ras-pl-others {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}
@media (max-width: 1024px) { .ras-pl-others { grid-template-columns: repeat(2, 1fr); } }
.ras-pl-other {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 20px;
  border: 1px solid var(--ras-border);
  border-radius: 12px;
  background: var(--ras-bg-card);
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ras-text-heading);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ras-pl-other:hover { border-color: var(--ras-maroon); color: var(--ras-copper); }
.ras-pl-other-arrow { color: var(--ras-copper); }

/* Action card rows */
.ras-pl-action-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ras-border-subtle);
}
.ras-pl-action-row:last-of-type { border-bottom: 0; }

/* Product-line H1 — a CLASSIC heading (post-title dynamic tag), so its scale
   rides this class rather than a Global Class. Prototype: clamp 42–68px. */
.elementor .ras-pl-title .elementor-heading-title {
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ras-text-heading);
}
.elementor .ras-pl-action span { font: 14px/1.4 "Inter", sans-serif; color: var(--ras-text-muted); }
.elementor .ras-pl-action strong {
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ras-text-heading);
}

/* -----------------------------------------------------------------------------
   Contact form (classic Pro form widget — styled by class, 07's token table)
----------------------------------------------------------------------------- */

.ras-contact-form .elementor-field-group { margin-bottom: 20px; }
.ras-contact-form label {
  font: 600 13px/1.4 "Inter", sans-serif;
  color: var(--ras-text-heading);
}
.ras-contact-form .elementor-field-textual,
.ras-contact-form select,
.ras-contact-form textarea {
  background: var(--ras-bg-surface);
  border: 1px solid var(--ras-border);
  border-radius: 8px;
  padding: 12px 16px;
  font: 15px/1.4 "Inter", sans-serif;
  color: var(--ras-text-heading);
}
.ras-contact-form .elementor-field-textual::placeholder { color: var(--ras-input-placeholder, var(--ras-text-muted)); }
.ras-contact-form .elementor-field-textual:focus,
.ras-contact-form select:focus,
.ras-contact-form textarea:focus {
  border-color: var(--ras-copper);
  outline: none;
}
.ras-contact-form textarea { resize: none; }
.ras-contact-form .elementor-button[type="submit"] {
  background: var(--ras-maroon);
  color: #fff;
  border-radius: var(--ras-radius-btn, 10px);
  padding: 12px 32px;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ras-contact-form .elementor-button[type="submit"]:hover { background: var(--ras-maroon-hover); }

/* -----------------------------------------------------------------------------
   News cards + article prose
----------------------------------------------------------------------------- */

.ras-news-card {
  background: var(--ras-bg-card);
  border: 1px solid var(--ras-border-subtle);
  border-radius: var(--ras-radius-card);
  box-shadow: var(--ras-shadow);
  overflow: hidden;
  height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.ras-news-card:hover { transform: translateY(-4px); border-color: var(--ras-copper); }
.ras-news-card-img img { width: 100%; height: 220px; object-fit: cover; display: block; }
.ras-news-card-body { padding: 24px !important; gap: 10px; }
.ras-news-card-meta p {
  margin: 0;
  font: 13px/1.4 "Inter", sans-serif;
  color: var(--ras-copper);
}
.elementor .ras-news-card-title .elementor-heading-title {   /* .elementor prefix: beats the kit's widget-heading rule on load order */
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ras-text-heading);
}
.ras-news-card-excerpt p {
  margin: 0;
  font: 15px/1.55 "Inter", sans-serif;
  color: var(--ras-text-body);
}
/* the whole card links via the loop item's post-url on the title */
.ras-news-card-title a { color: inherit; }
.ras-news-card-title a:hover { color: var(--ras-copper); }

.ras-news-hero-img img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--ras-radius-card);
}

.ras-prose { font: 17px/1.7 "Inter", sans-serif; color: var(--ras-text-body); }
.ras-prose p { margin: 0 0 20px; }

/* Article body vocabulary (2026-10 blog cluster). The prototype's article page
   only ever rendered paragraphs, so headings / lists / tables / figures / CTAs
   are composed from the site system: condensed uppercase headings, maroon
   markers, card surfaces, the maroon pill button. `.elementor` prefix: the kit
   heading rules tie component selectors and win on load order (trap #34). */
.elementor .ras-prose h2,
.elementor .ras-prose h3 {
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ras-text-heading);
}
.elementor .ras-prose h2 { font-size: 30px; line-height: 1.15; margin: 48px 0 16px; }
.elementor .ras-prose h3 { font-size: 22px; line-height: 1.2; margin: 32px 0 12px; letter-spacing: 0.04em; }
.ras-prose > :first-child { margin-top: 0; }
.ras-prose strong { color: var(--ras-text-heading); font-weight: 600; }
.ras-prose a { color: var(--ras-copper); text-decoration: underline; text-underline-offset: 3px; }
.ras-prose a:hover { color: var(--ras-text-heading); }

.ras-prose ul,
.ras-prose ol { margin: 0 0 24px; padding-left: 0; list-style: none; }
.ras-prose li { position: relative; margin: 0 0 12px; padding-left: 32px; }
.ras-prose ul > li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--ras-maroon);
}
.ras-prose ol { counter-reset: ras-ol; }
.ras-prose ol > li { counter-increment: ras-ol; }
.ras-prose ol > li::before {
  content: counter(ras-ol);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--ras-maroon);
  color: #ffffff;
  font: 600 12px/22px "Inter", sans-serif;
  text-align: center;
}

/* Tables: card surface; scroll inside the wrapper on phones, never the page. */
.ras-prose .ras-table-wrap {
  margin: 8px 0 32px;
  overflow-x: auto;
  border: 1px solid var(--ras-border);
  border-radius: var(--ras-radius-card);
  background: var(--ras-bg-card);
  box-shadow: var(--ras-shadow);
}
.ras-prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.ras-prose th,
.ras-prose td { padding: 14px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--ras-border); }
.ras-prose tbody tr:last-child td { border-bottom: 0; }
/* hello-elementor reset.css zebra-stripes every table body; the card surface carries it instead */
.ras-prose table tbody > tr:nth-child(odd) > td,
.ras-prose table tbody > tr:nth-child(odd) > th,
.ras-prose table tbody tr:hover > td { background-color: transparent; }
.ras-prose table caption + thead tr:first-child td,
.ras-prose table caption + thead tr:first-child th,
.ras-prose table colgroup + thead tr:first-child th,
.ras-prose table thead:first-child tr:first-child th { border-top: 0; }
.ras-prose th {
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ras-copper);
}
.ras-prose td:first-child { color: var(--ras-text-heading); font-weight: 600; }

/* Inline article diagrams ([ras_figure]) — the SVG themes itself. */
.ras-prose .ras-figure {
  margin: 16px 0 36px;
  border: 1px solid var(--ras-border);
  border-radius: var(--ras-radius-card);
  overflow: hidden;
  line-height: 0;
}
.ras-prose .ras-figure svg { display: block; width: 100%; height: auto; }

/* "Read more: …" cross-links between cluster posts */
.ras-prose .ras-post-readmore {
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 3px solid var(--ras-maroon);
  font-size: 15px;
  color: var(--ras-text-muted);
}

/* Closing call to action */
.ras-prose .ras-post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 40px 0 0;
  padding: 24px 28px;
  border: 1px solid var(--ras-border);
  border-radius: var(--ras-radius-card);
  background: var(--ras-bg-card);
  box-shadow: var(--ras-shadow);
}
.ras-prose .ras-post-cta p { flex: 1 1 280px; margin: 0; color: var(--ras-text-heading); font-weight: 500; }
/* wpautop wraps the button in its own <p>; that one must not grow, so the button sits hard right. */
.ras-prose .ras-post-cta p:has(> .ras-post-cta__btn) { flex: 0 0 auto; margin-left: auto; }
.ras-prose .ras-post-cta > .ras-post-cta__btn { margin-left: auto; }
.ras-prose .ras-post-cta__btn,
.ras-prose a.ras-post-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 9999px;
  background: var(--ras-maroon);
  color: #ffffff;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.ras-prose a.ras-post-cta__btn:hover { background: var(--ras-red-highlight, #a30000); color: #ffffff; }

@media (max-width: 767px) {
  .elementor .ras-prose h2 { font-size: 26px; margin-top: 40px; }
  .elementor .ras-prose h3 { font-size: 20px; }
  .ras-prose .ras-post-cta { padding: 20px; }
}

/* -----------------------------------------------------------------------------
   Footer refinements (D4 re-diff vs Footer.tsx)
----------------------------------------------------------------------------- */

/* Footer logo — h-[24px] in the prototype; the classic image widget ignores its
   height control at `image_size: full`. */
.elementor-widget.ras-ftr-logo img { height: 18px; width: auto; } /* 24px box minus old-file padding */

/* Current menu item falls back to Elementor's default green accent — same trap
   as the header nav. */
.elementor .ras-ftr-nav .elementor-item-active,
.elementor .ras-ftr-nav .elementor-item-active:focus {
  /* !important: the widget's own active-item rule is more specific */
  color: var(--ras-text-heading) !important;
}

/* classic image widget centres its content by default */
.elementor-widget.ras-ftr-logo { text-align: left; }

/* Contact rows: lucide glyph + text. */
.ras-ftr-contact .ras-ftr-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font: 15px/1.5 "Inter", sans-serif;
  color: var(--ras-text-body);
}
.ras-ftr-contact .ras-ftr-item a { color: var(--ras-text-body); }
.ras-ftr-contact .ras-ftr-item a:hover { color: var(--ras-copper); }
.ras-ftr-contact .ras-icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  background-color: var(--ras-text-muted);
}

/* Hours: label left, value right (Footer.tsx uses a justified pair). */
.ras-ftr-hours .ras-ftr-hrow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  font: 15px/1.5 "Inter", sans-serif;
  color: var(--ras-text-body);
}
.ras-ftr-hours .ras-ftr-hrow span:last-child { color: var(--ras-text-heading); }

/* The three footer glyphs. */
.elementor .ras-icon--phone { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
.elementor .ras-icon--mail { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>"); }
.elementor .ras-icon--map-pin { --ras-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>"); }

/* The post-pin tail ("More than just your core buyer…") shares the stage's
   THEME-FLIPPING canvas (CarExplode.tsx bgColor), not the invariant dark. */
.elementor .ras-explode-tail { background-color: var(--ras-canvas-explode); }


/* =============================================================================
   ras-hub — About "What We Stand For" hub-and-spoke (granted 2026-08-21)
   -----------------------------------------------------------------------------
   Faithful port of HubAndSpoke.tsx: dim maroon spokes always visible, hover a
   corner card to light its spoke copper with a flowing dash, grow the end dots,
   ring-glow the card, and swap the hub subtitle for "↳ {Title}". Idle state
   breathes a copper pulse ring. Mobile is a native <details> accordion.
   Choreography: assets/js/ras-about.js. Static markup = complete resting frame.
============================================================================= */

.ras-hub {
  /* Scoped theme surface tokens (source: hubBg #141414 dark / bg-card light). */
  --ras-hub-line: #68101b;
  --ras-hub-bg: var(--ras-bg-card);
  --ras-hub-active-bg: var(--ras-bg-card);
  --ras-hub-shadow: 0 0 0 1px var(--ras-border), 0 8px 32px rgba(0, 0, 0, 0.08);
  width: 100%;
}
html[data-ras-theme="dark"] .ras-hub {
  --ras-hub-bg: #141414;
  --ras-hub-active-bg: #1a1a1a;
  --ras-hub-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06), 0 16px 48px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  html:not([data-ras-theme="light"]) .ras-hub {
    --ras-hub-bg: #141414;
    --ras-hub-active-bg: #1a1a1a;
    --ras-hub-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06), 0 16px 48px rgba(0, 0, 0, 0.45);
  }
}

/* ── Desktop diagram ── */
.ras-hub-desktop { display: none; }
@media (min-width: 1024px) {
  .ras-hub-desktop { display: block; position: relative; min-height: 700px; }
  .ras-hub-mobile { display: none; }
}

.ras-hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ras-hub-line-dim {
  stroke: var(--ras-hub-line);
  stroke-width: 1.5;
  opacity: 0.35;
}
.ras-hub-line-hot {
  stroke: var(--ras-copper-on-dark);
  stroke-width: 0;
  stroke-dasharray: 12 8;
  transition: stroke-width 0.2s;
}
.ras-hub-lines g.ras-active .ras-hub-line-hot {
  stroke-width: 3;
  animation: ras-dash-flow 0.8s linear infinite;
}
.ras-hub-dot-a,
.ras-hub-dot-b {
  fill: var(--ras-hub-line);
  transition: r 0.2s, fill 0.2s, opacity 0.2s;
}
.ras-hub-dot-a { opacity: 0.5; }
.ras-hub-dot-b { opacity: 0.4; }
.ras-hub-lines g.ras-active .ras-hub-dot-a { r: 5; fill: var(--ras-copper-on-dark); opacity: 1; }
.ras-hub-lines g.ras-active .ras-hub-dot-b { r: 4; fill: var(--ras-copper-on-dark); opacity: 1; }

/* Hub card */
.ras-hub-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
}
.ras-hub-pulse {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--ras-copper-on-dark) 50%, transparent);
  animation: ras-hub-pulse 2.8s ease-in-out infinite;
  transition: opacity 0.3s;
}
.ras-hub--engaged .ras-hub-pulse { opacity: 0 !important; animation: none; }

.ras-hub-card {
  position: relative;
  border-radius: 16px;
  padding: 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--ras-hub-bg);
  box-shadow: var(--ras-hub-shadow);
  transition: box-shadow 0.3s;
}
.ras-hub--engaged .ras-hub-card {
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.35), 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ras-hub-overline {
  margin: 0;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ras-copper-on-dark);
}
.ras-hub-card h3 {
  margin: 0;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 44px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ras-text-heading);
}
.ras-hub-sub {
  margin: 0;
  font: 14px/1.6 "Inter", sans-serif;
  color: var(--ras-text-body);
  max-height: 80px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
.ras-hub--engaged .ras-hub-sub { max-height: 0; opacity: 0; }
.ras-hub-callout {
  margin: 0;
  font: italic 13px/1.6 "Inter", sans-serif;
  color: var(--ras-copper-on-dark);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
.ras-hub--engaged .ras-hub-callout { max-height: 100px; opacity: 1; }

/* Corner spoke cards */
.ras-hub-spoke {
  position: absolute;
  width: 300px;
  padding: 28px;
  border-radius: 16px;
  background: var(--ras-bg-elevated);
  box-shadow: var(--ras-shadow);
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
}
.ras-hub-spoke--tl { left: 0; top: 0; }
.ras-hub-spoke--tr { right: 0; top: 0; }
.ras-hub-spoke--bl { left: 0; bottom: 0; }
.ras-hub-spoke--br { right: 0; bottom: 0; }
.ras-hub-spoke.ras-active {
  background: var(--ras-hub-active-bg);
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.4), 0 20px 50px rgba(0, 0, 0, 0.35);
  transform: scale(1.04);
}
.ras-hub-bar {
  height: 3px;
  width: 2rem;
  border-radius: 9999px;
  margin-bottom: 20px;
  background: var(--ras-hub-line);
  transition: width 0.35s ease, background 0.25s;
}
.ras-hub-spoke.ras-active .ras-hub-bar {
  width: 100%;
  background: color-mix(in srgb, var(--ras-copper-on-dark) 70%, transparent);
}
.ras-hub-spoke h4 {
  margin: 0 0 16px;
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ras-text-heading);
}
.ras-hub-spoke p {
  margin: 0;
  font: 15px/1.6 "Inter", sans-serif;
  color: var(--ras-text-body);
}

/* ── Mobile accordion (native <details> — JS-free) ── */
.ras-hub-mobile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ras-hub-card--m { text-align: center; }
.ras-hub-card--m h3 { font-size: 36px; }

.ras-hub-acc {
  border-radius: 16px;
  overflow: hidden;
  background: var(--ras-bg-elevated);
  box-shadow: var(--ras-shadow);
  transition: background 0.25s, box-shadow 0.25s;
}
.ras-hub-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
}
.ras-hub-acc summary::-webkit-details-marker { display: none; }
.ras-hub-acc summary span {
  font-family: "transducer-variable", "Oswald", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ras-text-heading);
  transition: color 0.25s;
}
.ras-hub-acc summary i {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  color: var(--ras-text-body);
  transition: transform 0.25s, color 0.25s;
}
.ras-hub-acc[open] {
  background: var(--ras-maroon);
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.35), 0 12px 32px rgba(132, 0, 0, 0.2);
}
.ras-hub-acc[open] summary span { color: #ffffff; }
.ras-hub-acc[open] summary i { color: var(--ras-copper-on-dark); transform: rotate(45deg); }
.ras-hub-acc > p {
  margin: 0;
  padding: 0 24px 24px;
  font: 15px/1.6 "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes ras-dash-flow {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ras-hub-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0;   transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .ras-hub-pulse { animation: none; opacity: 0.4; }
  .ras-hub-lines g.ras-active .ras-hub-line-hot { animation: none; }
}

/* The base .ras-hub-mobile{display:flex} rule is declared AFTER the desktop
   media block and was winning at equal specificity — re-assert the branch. */
@media (min-width: 1024px) {
  .ras-hub-mobile { display: none; }
}

/* Chip rows wrap via class — `flex-wrap` is not a Style_Schema prop (its
   presence dropped the whole row style and stacked chips full-width). */
.elementor .ras-wrap { flex-wrap: wrap; }

/* Bullet rows ran 41px tall from the .e-div-block-base 10px padding — the
   prototype's line lists are compact (~21px rows). */
.elementor .ras-bullet { padding: 0; }

/* Chips are atomic .e-con elements, and Elementor's container base makes every
   .e-con FULL-WIDTH — so each pill claimed a whole row and the row "stacked".
   Inside a chip row, items hug their content. */
.elementor .ras-wrap > .e-con { width: fit-content; }

/* =============================================================================
   /technology  (TechnologyPage.tsx, current prototype — re-cut 2026-10-15)
   Every rule is scoped under a section class so it out-specifies the atomic
   base styles (.elementor .e-*-base, 0-2-0) without a blanket reset (trap #21).
============================================================================= */

/* ── Hero canvas: flips with the theme (source: isDark ? #111 : bg-section-alt),
   48px grid texture + two corner red glows (600px circles, 70% falloff). ── */
.ras-tech-hero {
  --ras-tech-hero-bg: var(--ras-bg-section-alt);
  --ras-tech-grid: rgba(0, 0, 0, 0.03);          /* rgba(0,0,0,.5) at opacity .06 */
  --ras-tech-glow: rgba(132, 0, 0, 0.12);
}
html[data-ras-theme="dark"] .ras-tech-hero {
  --ras-tech-hero-bg: #111111;
  --ras-tech-grid: rgba(255, 255, 255, 0.032);   /* rgba(255,255,255,.8) at .04 */
  --ras-tech-glow: rgba(132, 0, 0, 0.28);
}
@media (prefers-color-scheme: dark) {
  html:not([data-ras-theme="light"]) .ras-tech-hero {
    --ras-tech-hero-bg: #111111;
    --ras-tech-grid: rgba(255, 255, 255, 0.032);
    --ras-tech-glow: rgba(132, 0, 0, 0.28);
  }
}

.elementor .ras-tech-hero {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background-color: var(--ras-tech-hero-bg);
  background-image:
    radial-gradient(circle 424px at 100px 100px, var(--ras-tech-glow) 0%, transparent 70%),
    radial-gradient(circle 424px at calc(100% - 100px) calc(100% - 100px), var(--ras-tech-glow) 0%, transparent 70%),
    linear-gradient(var(--ras-tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ras-tech-grid) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  transition: background-color 0.3s;
}

.elementor .ras-tech-hero .ras-tech-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  width: 100%;
  padding: 0;
  gap: 0;
}

/* Copy: left half, vertically centred, px-10 md:px-16. */
.elementor .ras-tech-hero .ras-tech-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 64px;
  gap: 0;
}
.elementor .ras-tech-hero .ras-tech-overline {
  font-size: 13px;
  margin: 0 0 16px;
}
.elementor .ras-tech-hero .ras-tech-h1 {
  font-size: 62px;
  line-height: 1;
  margin: 0 0 20px;
  color: var(--ras-text-heading);
}
.elementor .ras-tech-hero .ras-tech-hero-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 440px;
  padding: 0;
  margin: 0 0 32px;
}
.elementor .ras-tech-hero .ras-tech-body,
.elementor .ras-tech-platform .ras-tech-body {
  font-family: var(--ras-font-body);
  font-size: 17px;
  line-height: 1.625;
  color: var(--ras-text-body);
  margin: 0;
}

.elementor .ras-tech-hero .ras-tech-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 100svh;
}

/* ── CSS 3D laptop, approximating the source's final frame (macGroup y −0.1π,
   slight top-down view). The group turns in 3D as ONE flat plane; the deck's
   top-down foreshortening is drawn with clip-path trapezoids. (A hinged
   preserve-3d deck nested under the rotated group rendered edge-on — flat
   composition is the robust route.) ── */
.elementor .ras-tech-hero .ras-laptop {
  --lw: min(36vw, 540px);                 /* lid width drives everything */
  width: var(--lw);
  padding: 0;
  perspective: 1600px;
}
.elementor .ras-tech-hero .ras-laptop-float {
  position: relative;
  padding: 0 0 calc(var(--lw) * 0.17);    /* room for the deck below the lid */
  transform: rotateY(-20deg) rotateX(4deg);
  animation: ras-laptop-appear 1.6s cubic-bezier(0.16, 1, 0.3, 1) both,
             ras-laptop-float 3.6s ease-in-out 1.6s infinite;
}
.elementor .ras-tech-hero .ras-laptop-lid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.4;
  padding: 3.2% 3.2% 4.4%;
  background: #0b0b0b;
  border-radius: 18px 18px 4px 4px;
  box-shadow: inset 0 0 0 2px #2a2a2a, inset 0 0 0 3px #050505;
}
.elementor .ras-tech-hero img.ras-laptop-screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  border-radius: 3px;
  opacity: 0.96;
}
/* Deck: a trapezoid flaring toward the viewer, directly under the hinge. */
.elementor .ras-tech-hero .ras-laptop-deck {
  position: absolute;
  left: -7%;
  width: 114%;
  bottom: 0;
  height: calc(var(--lw) * 0.17);
  padding: 0;
  background: linear-gradient(180deg, #2a2a2a 0%, #3c3c3c 55%, #333 100%);
  clip-path: polygon(6.5% 0, 93.5% 0, 100% 88%, 99% 100%, 1% 100%, 0 88%);
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
}
.elementor .ras-tech-hero .ras-laptop-kbd {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 9%;
  height: 46%;
  padding: 0;
  background-color: #121212;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 15 - 2px), #303030 calc(100% / 15 - 2px) calc(100% / 15)),
    repeating-linear-gradient(180deg, transparent 0 calc(100% / 5 - 2px), #303030 calc(100% / 5 - 2px) calc(100% / 5));
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
}
.elementor .ras-tech-hero .ras-laptop-pad {
  position: absolute;
  left: 39%;
  right: 39%;
  top: 62%;
  height: 28%;
  padding: 0;
  background: #464646;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}
.elementor .ras-tech-hero .ras-laptop-lid,
.elementor .ras-tech-hero .ras-laptop-deck,
.elementor .ras-tech-hero .ras-laptop-kbd,
.elementor .ras-tech-hero .ras-laptop-pad { min-width: 0; }   /* trap #37 */

@keyframes ras-laptop-appear {
  from { opacity: 0; transform: translateY(80px) rotateY(10deg) rotateX(40deg); }
  to   { opacity: 1; transform: rotateY(-20deg) rotateX(4deg); }
}
@keyframes ras-laptop-float {
  0%, 100% { transform: rotateY(-20deg) rotateX(4deg) translateY(0); }
  50%      { transform: rotateY(-20deg) rotateX(4deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .ras-tech-hero .ras-laptop-float { animation: none; }
}
/* Editor stays inert (house rule). */
.elementor-editor-active .ras-laptop-float { animation: none !important; }

/* Tablet: tighter copy, smaller H1. Mobile: stack, laptop below the copy. */
@media (max-width: 1024px) {
  .elementor .ras-tech-hero .ras-tech-hero-copy { padding: 0 40px; }
  .elementor .ras-tech-hero .ras-tech-h1 { font-size: 44px; }
}
@media (max-width: 767px) {
  .elementor .ras-tech-hero { min-height: 0; }
  .elementor .ras-tech-hero .ras-tech-hero-grid { grid-template-columns: 1fr; }
  .elementor .ras-tech-hero .ras-tech-hero-copy { padding: 96px 24px 0; }
  .elementor .ras-tech-hero .ras-tech-hero-art { min-height: 0; padding: 24px 0 120px; }
  .elementor .ras-tech-hero .ras-laptop { --lw: 72vw; }
}

/* ── Platform section ── */
.elementor .ras-tech-platform {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 112px var(--ras-gutter, 24px);
  background: var(--ras-bg-section);
  transition: background-color 0.3s;
}
.elementor .ras-tech-platform .ras-tech-inner,
.elementor .ras-tech-callout .ras-tech-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1152px;            /* max-w-[1200px] px-6 */
  padding: 0;
  gap: 0;
}

/* False CorePro search bar */
.elementor .ras-tech-platform .ras-tech-search {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  margin: 0 0 56px;
  background: var(--ras-bg-card);
  border: 1px solid var(--ras-border);
  border-radius: 16px;
  box-shadow: var(--ras-shadow);
}
.elementor .ras-tech-platform .ras-tech-search-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: var(--ras-text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") center / contain no-repeat;
}
.elementor .ras-tech-platform .ras-tech-search-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  width: auto;
}
.elementor .ras-tech-platform .ras-tech-search-chip {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 3px 24px;
  border-radius: 9999px;
  font-family: var(--ras-font-heading);
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  color: var(--ras-text-muted);
  background: var(--ras-bg-page);
  border: 1px solid var(--ras-border);
}

/* Left-aligned section header, max-w-[640px] mb-14 */
.elementor .ras-tech-platform .ras-tech-hdr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 640px;
  padding: 0;
  margin: 0 0 56px;
  gap: 0;
}
.elementor .ras-tech-overline { font-size: 13px; margin: 0 0 12px; }
.elementor .ras-tech-platform .ras-tech-h2 {
  font-size: 52px;
  line-height: 1.05;
  margin: 0 0 20px;
  text-align: left;
}

/* App cards */
.elementor .ras-tech-platform .ras-tech-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 24px;
  padding: 0;
}
.elementor .ras-tech-platform .ras-tech-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  gap: 0;
  border-radius: 16px;
  border: 1px solid var(--ras-border);
  background: var(--ras-bg-elevated);
  box-shadow: var(--ras-shadow);
  transition: background-color 0.3s;
}
.elementor .ras-tech-platform .ras-tech-card-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0 0 20px;
}
.elementor .ras-tech-platform .ras-tech-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--ras-maroon);
}
.elementor .ras-tech-platform .ras-tech-card-label {
  margin: 0;
  font-family: var(--ras-font-heading);
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ras-copper);
}
.elementor .ras-tech-platform .ras-tech-card-platform {
  margin: 0 0 0 auto;
  font-family: var(--ras-font-body);
  font-size: 11px;
  white-space: nowrap;
  color: var(--ras-text-muted);
}
.elementor .ras-tech-platform .ras-tech-card-title {
  margin: 0 0 12px;
  font-family: var(--ras-font-heading);
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ras-text-heading);
}
.elementor .ras-tech-platform .ras-tech-card-body {
  margin: 0 0 24px;
  font-family: var(--ras-font-body);
  font-size: 15px;
  line-height: 1.625;
  color: var(--ras-text-body);
}
.elementor .ras-tech-platform .ras-tech-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0 0 32px;
}
.elementor .ras-tech-platform .ras-tech-bullet {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
}
/* Atomic .e-con ships `min-width: 30px` (trap #37) — small marks must zero it
   or an 8px dot renders as a 30px bar. */
.elementor .ras-tech-platform .ras-tech-dot,
.elementor .ras-tech-platform .ras-tech-ring,
.elementor .ras-tech-platform .ras-tech-search-icon { min-width: 0; }

/* Ring bullet: 14px maroon ring with a 6px dot (source: w-3.5 ring + w-1.5 dot). */
.elementor .ras-tech-platform .ras-tech-ring {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ras-maroon);
  background: radial-gradient(circle, var(--ras-maroon) 0 3px, transparent 3.5px);
}
.elementor .ras-tech-platform .ras-tech-bullet-text {
  margin: 0;
  font-family: var(--ras-font-body);
  font-size: 14px;
  line-height: 1.625;
  color: var(--ras-text-body);
}
.elementor .ras-tech-platform .ras-tech-card-cta,
.elementor .ras-tech-callout .ras-tech-callout-cta {
  display: block;
  text-align: center;
  background: var(--ras-maroon);
  color: #ffffff;
  font-family: var(--ras-font-heading);
  font-variation-settings: "slnt" 0, "wdth" 65, "wght" 700;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 10px;
  transition: background-color 0.2s;
}
.elementor .ras-tech-platform .ras-tech-card-cta {
  width: 100%;
  margin-top: auto;
  padding: 12px 24px;
  font-size: 14px;
}
.elementor .ras-tech-platform .ras-tech-card-cta:hover,
.elementor .ras-tech-callout .ras-tech-callout-cta:hover { background: #9a1a1a; color: #ffffff; }

/* ── Access callout: elevated band, border-y, copy left / button right ── */
.elementor .ras-tech-callout {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 80px var(--ras-gutter, 24px);
  background: var(--ras-bg-elevated);
  border-top: 1px solid var(--ras-border);
  border-bottom: 1px solid var(--ras-border);
  transition: background-color 0.3s;
}
.elementor .ras-tech-callout .ras-tech-callout-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.elementor .ras-tech-callout .ras-tech-callout-copy {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  padding: 0;
  gap: 0;
}
.elementor .ras-tech-callout .ras-tech-h2-sm {
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 16px;
  text-align: left;
}
.elementor .ras-tech-callout .ras-tech-callout-body {
  margin: 0;
  font-family: var(--ras-font-body);
  font-size: 16px;
  line-height: 1.625;
  color: var(--ras-text-body);
}
.elementor .ras-tech-callout .ras-tech-callout-cta {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 12px 32px;
  font-size: 15px;
}

@media (max-width: 1024px) {
  .elementor .ras-tech-platform .ras-tech-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .elementor .ras-tech-platform { padding: 80px var(--ras-gutter, 24px); }
  .elementor .ras-tech-platform .ras-tech-cards { grid-template-columns: 1fr; }
  .elementor .ras-tech-platform .ras-tech-h2 { font-size: 40px; }
  .elementor .ras-tech-callout { padding: 64px var(--ras-gutter, 24px); }
  .elementor .ras-tech-callout .ras-tech-callout-row { flex-direction: column; align-items: flex-start; }
  .elementor .ras-tech-callout .ras-tech-h2-sm { font-size: 36px; }
}

/* -----------------------------------------------------------------------------
   Tablet gutter (Joe, 2026-10-15: "the tablet breakpoint needs a little bit more
   padding on the sides"). ras-container pads with var(--ras-gutter); the kit
   emits it on :root as 24px, and this sheet loads after the kit, so the
   re-declaration wins. Phones keep the prototype's px-6 (24px).
----------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root { --ras-gutter: 40px; }
}
@media (max-width: 767px) {
  :root { --ras-gutter: 24px; }
}