/* ============================================================================
   Homepage sections, ported from ~/Repos/website-refresh src/app/components.
   Loaded only on the homepage (via @@section Styles in Index.cshtml).
   Global, rf- prefixed. One block per React component, in Home.tsx order.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   HERO  (Hero.tsx)
--------------------------------------------------------------------------- */
.rf-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 40% 36%, #131313 30%, #0C0C0C 100%);
  padding-top: 128px;
  padding-bottom: 40px;
  overflow: hidden;
}

/* ---- THE POWER-ON (hero pick, dramatic cut, 2026-07-17) -------------------
   Base state below is LIT (line drawn, screen on): what reduced-motion and
   data-saver visitors see. The .is-poweron class (set on every homepage load
   by the inline gate in _HeroPartial) runs the sequence:
   0-0.7s dark stage + ignition stutters; 0.7-1.8s the charge shoots the
   wall (arc branch at the elbow); 1.85s impact (shockwave, screen jolt,
   one-frame room blink); 1.95-2.5s CRT bloom reveals the playing trailer
   while the type snaps on; stats bar last; 6s idle pulse forever. */
.rf-hero__charge { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; }
.rf-hero__charge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rf-hero__ghostline { stroke: rgba(196,73,80,0.32); stroke-width: 1.5; }
.rf-hero__liveline { stroke: rgba(196,73,80,0.85); stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(196,73,80,0.55)); }
.rf-hero__idlepulse { stroke: rgba(196,73,80,0.9); stroke-width: 1.5;
  stroke-dasharray: 4 96; stroke-dashoffset: 100; opacity: 0;
  animation: rf-po-pulse 6s linear 4.6s infinite; }
.rf-hero__branch, .rf-hero__ignite, .rf-hero__wave, .rf-hero__sparkdot { opacity: 0; }
.rf-hero__junction { fill: var(--rf-red); opacity: 0.6; }
.rf-hero__flash { position: absolute; inset: 0; z-index: 15; pointer-events: none;
  background: #C44950; opacity: 0; }

.rf-hero__screen {
  position: relative;
  z-index: 10;
  margin: 48px auto 0;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(196,73,80,0.55);
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 28px 110px -18px rgba(167,37,44,0.7), 0 0 90px -6px rgba(167,37,44,0.45);
  /* stacked (below 1280): copy, then screen, then credentials strip */
  order: 2;
}
.rf-hero__crt { position: absolute; inset: 0; }
.rf-hero__crt video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-hero__off { position: absolute; inset: 0; background: #000; z-index: 2; opacity: 0; }
.rf-hero__scanline { position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: rgba(255,255,255,0.98); opacity: 0; z-index: 3; transform-origin: center;
  box-shadow: 0 0 24px rgba(255,255,255,0.9); }

/* Sound toggle on the CRT screen. Sits above the off/scanline overlays. */
.rf-hero__sound {
  position: absolute; bottom: 12px; right: 12px; z-index: 6;
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(13,13,13,0.55); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s var(--rf-ease), transform 0.2s var(--rf-ease), border-color 0.2s var(--rf-ease);
}
.rf-hero__sound:hover { background: rgba(167,37,44,0.9); border-color: transparent; transform: translateY(-1px); }
.rf-hero__sound:focus-visible { outline: 2px solid var(--rf-red-light); outline-offset: 3px; }
.rf-hero__sound svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rf-hero__sound .rf-hero__sound-on, .rf-hero__sound .rf-hero__sound-off { display: none; }
.rf-hero__sound.is-muted .rf-hero__sound-off { display: block; }
.rf-hero__sound:not(.is-muted) .rf-hero__sound-on { display: block; }
/* Gentle attention pulse while muted, so the "sound available" affordance reads. */
.rf-hero__sound.is-muted::after {
  content: ""; position: absolute; inset: -1px; border-radius: 999px;
  border: 1px solid rgba(196,73,80,0.7); animation: rf-hero-sound-pulse 2.4s ease-out infinite;
}
@keyframes rf-hero-sound-pulse { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
/* During the power-on the screen is dark; fade the button in with the reveal. */
.rf-hero.is-poweron .rf-hero__sound { opacity: 0; animation: rf-po-el 0.5s ease-out 2.4s forwards; }
@media (prefers-reduced-motion: reduce) { .rf-hero__sound.is-muted::after { animation: none; opacity: 0; } }

/* the sequence (gated) */
.rf-hero.is-poweron .rf-hero__liveline { stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: rf-po-charge 1.1s cubic-bezier(0.6,0,0.2,1) 0.7s forwards; }
.rf-hero.is-poweron .rf-hero__sparkdot { fill: #E86A70;
  filter: drop-shadow(0 0 10px rgba(232,106,112,0.9));
  /* offset-path is set on the element by refresh-home.js (the eyebrow-anchored
     route); this fallback matches the markup's fallback d. */
  offset-path: path("M 340 150 L 900 150 L 960 210 L 1084 210 L 1084 330");
  offset-rotate: 0deg;
  animation: rf-po-spark 1.1s cubic-bezier(0.6,0,0.2,1) 0.7s forwards; }
.rf-hero.is-poweron .rf-hero__ignite { fill: #E86A70;
  filter: drop-shadow(0 0 8px rgba(232,106,112,0.9));
  animation: rf-po-stutter 0.7s steps(1) forwards; }
.rf-hero.is-poweron .rf-hero__branch { stroke: rgba(232,106,112,0.7); stroke-width: 1;
  stroke-dasharray: 130; stroke-dashoffset: 130;
  animation: rf-po-arc 0.4s linear 1.45s forwards; }
.rf-hero.is-poweron .rf-hero__wave { stroke: rgba(232,106,112,0.8); stroke-width: 2;
  animation: rf-po-wave 0.55s cubic-bezier(0.2,0.6,0.3,1) 1.82s forwards; }
.rf-hero.is-poweron .rf-hero__junction { opacity: 0;
  animation: rf-po-in 0.25s 1.5s forwards; }
.rf-hero.is-poweron .rf-hero__flash { animation: rf-po-flash 0.22s ease-out 1.84s; }
.rf-hero.is-poweron .rf-hero__screen { border-color: rgba(167,37,44,0.22); box-shadow: none;
  animation: rf-po-ignite 0.5s steps(2, jump-none) 1.95s forwards; }
.rf-hero.is-poweron .rf-hero__crt { animation: rf-po-jolt 0.28s linear 1.84s; }
.rf-hero.is-poweron .rf-hero__off { opacity: 1; animation: rf-po-flick 0.6s steps(1) 1.95s forwards; }
.rf-hero.is-poweron .rf-hero__scanline { animation: rf-po-scan 0.6s cubic-bezier(0.2,0.7,0.3,1) 1.95s; }
@keyframes rf-po-charge { to { stroke-dashoffset: 0; } }
@keyframes rf-po-spark { 0% { offset-distance: 0%; opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes rf-po-stutter { 0% { opacity: 0; } 14% { opacity: 1; } 22% { opacity: 0; } 38% { opacity: 0.9; } 46% { opacity: 0; } 64% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rf-po-arc { 0% { opacity: 0.9; stroke-dashoffset: 130; } 55% { opacity: 0.7; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes rf-po-wave { 0% { opacity: 0.9; r: 4; stroke-width: 2.5; } 100% { opacity: 0; r: 52; stroke-width: 0.5; } }
@keyframes rf-po-pulse { 0% { opacity: 0; stroke-dashoffset: 100; } 6% { opacity: 0.8; } 46% { opacity: 0.8; } 54% { opacity: 0; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes rf-po-in { to { opacity: 0.6; } }
@keyframes rf-po-flash { 0% { opacity: 0; } 30% { opacity: 0.07; } 100% { opacity: 0; } }
@keyframes rf-po-jolt { 0% { transform: none; } 25% { transform: translate(0,-3px); } 55% { transform: translate(0,2px); } 100% { transform: none; } }
@keyframes rf-po-flick { 0% { opacity: 1; } 18% { opacity: 0.05; } 30% { opacity: 0.95; } 42% { opacity: 0; } 55% { opacity: 0.75; } 70% { opacity: 0.1; } 84% { opacity: 0.4; } 100% { opacity: 0; } }
@keyframes rf-po-scan { 0% { opacity: 1; transform: scaleY(1); } 30% { opacity: 0.7; transform: scaleY(90); } 100% { opacity: 0; transform: scaleY(200); } }
@keyframes rf-po-ignite { to { border-color: rgba(196,73,80,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 28px 110px -18px rgba(167,37,44,0.7), 0 0 90px -6px rgba(167,37,44,0.45); } }

.rf-hero__main {
  position: relative;
  z-index: 20;
  order: 1;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
}
.rf-hero__wrap {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}
.rf-hero__grid { display: block; }
.rf-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.rf-hero__eyebrow-rule { width: 40px; height: 1px; background: var(--rf-red); }
.rf-hero__eyebrow-text {
  color: var(--rf-red);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.rf-hero__title {
  font-weight: 900;
  color: #fff;
  font-size: 10vw;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.rf-hero__title em {
  color: var(--rf-red-light);
  text-transform: none;
  font-style: normal;
  padding-right: 4px;
}
.rf-hero__sub {
  margin-top: 32px;
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 36rem;
}
.rf-hero__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.rf-hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  transition: color .2s var(--rf-ease);
}
.rf-hero__cta-secondary:hover { color: var(--rf-red); }
.rf-hero__cta-secondary .rf-hero__arrow-box {
  background: rgba(255,255,255,0.1);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: background .2s var(--rf-ease);
}
.rf-hero__cta-secondary:hover .rf-hero__arrow-box { background: var(--rf-red); }

/* Hero stats */
.rf-hero__stats {
  position: relative;
  z-index: 20;
  order: 3;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 32px;
}
.rf-hero__stats-wrap {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: 32px 24px;
}
.rf-hero__stats-head {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 28px;
}
.rf-hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 32px;
}
.rf-hero__stat-kind { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: rgba(255,255,255,0.45); }
.rf-hero__stat-kind.is-spec { color: var(--rf-red-light); }
.rf-hero__stat-name { font-weight: 700; color: #fff; font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
.rf-hero__stat-desc { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.3; }

/* Hero entrance. Default (return visits): the quiet rf-rise load-in.
   Under .is-poweron the type participates in the power-on instead:
   embers until impact, then it snaps on with the screen. */
.rf-hero__eyebrow, .rf-hero__title, .rf-hero__sub, .rf-hero__ctas {
  opacity: 0;
  animation: rf-rise .9s var(--rf-ease) forwards;
}
.rf-hero__title { animation-delay: .05s; }
.rf-hero__sub { animation-delay: .12s; }
.rf-hero__ctas { animation-delay: .2s; }
.rf-hero__stat { opacity: 0; animation: rf-rise .6s var(--rf-ease) forwards; }
.rf-hero__stat:nth-child(1) { animation-delay: .9s; }
.rf-hero__stat:nth-child(2) { animation-delay: 1.0s; }
.rf-hero__stat:nth-child(3) { animation-delay: 1.1s; }
.rf-hero__stat:nth-child(4) { animation-delay: 1.2s; }
.rf-hero__stat:nth-child(5) { animation-delay: 1.3s; }
@keyframes rf-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.rf-hero.is-poweron .rf-hero__eyebrow { opacity: 0.45; animation: rf-po-el 0.3s ease-out 1.95s forwards; }
.rf-hero.is-poweron .rf-hero__title { opacity: 0.3; filter: brightness(0.9) grayscale(0.6); transform: none;
  animation: rf-po-type 0.22s steps(2, jump-none) 1.9s forwards; }
.rf-hero.is-poweron .rf-hero__sub { opacity: 0; transform: translateY(14px);
  animation: rf-po-rise 0.5s cubic-bezier(0.16,1,0.3,1) 2.08s forwards; }
.rf-hero.is-poweron .rf-hero__ctas { opacity: 0; transform: translateY(14px);
  animation: rf-po-rise 0.5s cubic-bezier(0.16,1,0.3,1) 2.22s forwards; }
.rf-hero.is-poweron .rf-hero__stats { opacity: 0; animation: rf-po-el 0.6s ease-out 2.45s forwards; }
.rf-hero.is-poweron .rf-hero__stat:nth-child(1) { animation-delay: 2.5s; }
.rf-hero.is-poweron .rf-hero__stat:nth-child(2) { animation-delay: 2.6s; }
.rf-hero.is-poweron .rf-hero__stat:nth-child(3) { animation-delay: 2.7s; }
.rf-hero.is-poweron .rf-hero__stat:nth-child(4) { animation-delay: 2.8s; }
.rf-hero.is-poweron .rf-hero__stat:nth-child(5) { animation-delay: 2.9s; }
@keyframes rf-po-type { 0% { opacity: 0.3; filter: brightness(0.9) grayscale(0.6); } 55% { opacity: 1; filter: brightness(1.25) grayscale(0); } 100% { opacity: 1; filter: brightness(1) grayscale(0); } }
@keyframes rf-po-rise { to { opacity: 1; transform: none; } }
@keyframes rf-po-el { to { opacity: 1; } }

@media (min-width: 640px) {
  .rf-hero__stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .rf-hero__title { font-size: 8vw; }
}
@media (min-width: 1024px) {
  .rf-hero__wrap, .rf-hero__stats-wrap { padding-inline: 48px; }
  .rf-hero__sub { font-size: 20px; }
  .rf-hero__stats-grid { grid-template-columns: repeat(5, 1fr); }
  .rf-hero__stats-head { font-size: 17.5px; }
  .rf-hero__stat-name { font-size: 16px; }
  .rf-hero__stats-wrap { padding-block: 36px; }
}
@media (min-width: 1280px) {
  .rf-hero__title { font-size: 5.5rem; }
  /* The screen leaves the flow and docks right; the charge line feeds it.
     The headline's last word deliberately rides the screen's dark margin. */
  .rf-hero__charge { display: block; }
  .rf-hero__screen {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-52%);
    margin: 0;
    width: 640px;
    max-width: none;
    order: 0;
  }
}
@media (min-width: 1536px) {
  .rf-hero__wrap, .rf-hero__stats-wrap { max-width: 1560px; }
  .rf-hero__title { font-size: 6.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-hero__eyebrow, .rf-hero__title, .rf-hero__sub, .rf-hero__ctas,
  .rf-hero__stat { opacity: 1; animation: none; }
  .rf-hero__idlepulse { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------------------
   LOGO CAROUSEL  (LogoCarousel.tsx)
--------------------------------------------------------------------------- */
.rf-logos {
  position: relative;
  background: var(--rf-paper);
  border-bottom: 1px solid var(--rf-border-2);
  padding-block: 32px;
  overflow: hidden;
}
.rf-logos__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 10;
  pointer-events: none;
}
.rf-logos__fade--l { left: 0; background: linear-gradient(to right, var(--rf-paper), transparent); }
.rf-logos__fade--r { right: 0; background: linear-gradient(to left, var(--rf-paper), transparent); }
.rf-logos__label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rf-gray-4);
  margin-bottom: 24px;
}
.rf-logos__track {
  display: flex;
  gap: 64px;
  align-items: center;
  width: max-content;
  animation: rf-logos-scroll 30s linear infinite;
}
.rf-logos__track img {
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform .3s var(--rf-ease);
}
.rf-logos__track img:hover { transform: scale(1.05); }
@keyframes rf-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.33%); }
}

/* ---------------------------------------------------------------------------
   ZIGZAG SERVICES  (ZigzagServices.tsx)  "What we do"
--------------------------------------------------------------------------- */
.rf-zz { position: relative; overflow: hidden; }
.rf-zz__header { background: #fff; }
.rf-zz__header-inner {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
  padding: 80px 24px 24px;
}
.rf-zz__header-grid { display: grid; gap: 40px; align-items: center; }
.rf-zz__h2 {
  font-weight: 800;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--rf-ink);
  margin-bottom: 16px;
  text-wrap: balance;
}
.rf-zz__lead { font-size: 17px; color: var(--rf-gray-3); line-height: 1.5; max-width: 560px; }
.rf-zz__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(26,26,26,0.1);
  box-shadow: 0 24px 55px -30px rgba(0,0,0,0.4);
  background: #000;
}
.rf-zz__video video { width: 100%; height: 100%; object-fit: cover; }

.rf-zz__row { position: relative; }
.rf-zz__band {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}
.rf-zz__row.is-white .rf-zz__band { background: #fff; }
.rf-zz__row.is-dark .rf-zz__band { background: var(--rf-dark); }
.rf-zz__row.is-paper .rf-zz__band { background: var(--rf-paper); }
.rf-zz__row-inner {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
  padding: 56px 24px;
}
.rf-zz__grid { display: grid; gap: 32px; align-items: center; }
.rf-zz__text { display: flex; gap: 20px; align-items: flex-start; }
.rf-zz__num {
  font-weight: 900;
  font-size: 56px;
  line-height: 0.78;
  letter-spacing: -0.05em;
  flex-shrink: 0;
  user-select: none;
  color: var(--rf-red);
  padding-top: 4px;
}
.rf-zz__row.is-dark .rf-zz__num { color: var(--rf-red-light); }
.rf-zz__chip {
  display: inline-block;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--rf-red);
}
.rf-zz__row.is-dark .rf-zz__chip { color: var(--rf-red-light); }
.rf-zz__title {
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--rf-ink);
}
.rf-zz__row.is-dark .rf-zz__title { color: #fff; }
.rf-zz__desc { font-size: 15px; line-height: 1.65; margin-bottom: 24px; max-width: 440px; color: var(--rf-gray-3); }
.rf-zz__row.is-dark .rf-zz__desc { color: rgba(255,255,255,0.55); }
.rf-zz__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; max-width: 450px; }
.rf-zz__tag {
  font-family: var(--rf-font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(26,26,26,0.04);
  border: 1px solid rgba(26,26,26,0.1);
  color: #3A3B39;
}
.rf-zz__row.is-dark .rf-zz__tag {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.rf-zz__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rf-red);
}
.rf-zz__row.is-dark .rf-zz__cta { color: var(--rf-red-light); }
.rf-zz__media { position: relative; }
.rf-zz__media-halo {
  position: absolute;
  inset: -20px;
  background: rgba(167,37,44,0.1);
  filter: blur(45px);
  border-radius: 999px;
  pointer-events: none;
}
.rf-zz__img-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.5);
  border: 1px solid rgba(26,26,26,0.1);
}
.rf-zz__row.is-dark .rf-zz__img-frame { border-color: rgba(255,255,255,0.12); }
.rf-zz__img-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s ease-out;
}
.rf-zz__img-frame:hover img { transform: scale(1.04); }

@media (min-width: 1024px) {
  .rf-zz__header-inner { padding: 112px 48px 40px; }
  .rf-zz__header-grid { grid-template-columns: 1fr minmax(0, 520px); gap: 56px; }
  .rf-zz__h2 { font-size: 56px; }
  .rf-zz__lead { font-size: 18px; }
  .rf-zz__row-inner { padding: 80px 48px; }
  .rf-zz__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
  .rf-zz__text { gap: 32px; }
  .rf-zz__num { font-size: 120px; padding-top: 8px; }
  .rf-zz__title { font-size: 34px; }
  .rf-zz__desc { font-size: 16px; }
  /* Row alternation: graphic LEFT on rows 1 & 3, RIGHT on row 2. */
  .rf-zz__row.is-reverse .rf-zz__text { order: 2; flex-direction: row-reverse; }
  .rf-zz__row.is-reverse .rf-zz__media { order: 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .rf-zz__h2 { font-size: 48px; }
}

/* ---------------------------------------------------------------------------
   PROBLEM / SOLUTION  (ProblemSolution.tsx)  "What we solve"
--------------------------------------------------------------------------- */
.rf-ps {
  position: relative;
  background: var(--rf-dark);
  color: #fff;
  padding: 96px 24px;
  overflow: hidden;
}
.rf-ps__glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 820px; height: 400px;
  background: rgba(167,37,44,0.08);
  filter: blur(130px);
  border-radius: 999px;
  pointer-events: none;
}
.rf-ps__inner { max-width: 1300px; margin-inline: auto; position: relative; }
.rf-ps__head { max-width: 760px; margin-bottom: 56px; }
.rf-ps__h2 {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.rf-ps__sub { font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.5; max-width: 600px; }
.rf-ps__grid { display: grid; gap: 32px; align-items: stretch; }

.rf-ps__selector { display: flex; flex-direction: column; justify-content: center; height: 500px; overflow: hidden; }
.rf-ps__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
}
.rf-ps__selector .rf-ps__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.rf-ps__item-row { display: flex; align-items: baseline; gap: 16px; }
.rf-ps__item-num {
  font-family: var(--rf-font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.25);
  transition: color .3s var(--rf-ease);
}
.rf-ps__item-title {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.4);
  transition: color .3s var(--rf-ease);
}
.rf-ps__item:hover .rf-ps__item-num { color: rgba(255,255,255,0.5); }
.rf-ps__item:hover .rf-ps__item-title { color: rgba(255,255,255,0.7); }
.rf-ps__item.is-active .rf-ps__item-num { color: var(--rf-red-light); }
.rf-ps__item.is-active .rf-ps__item-title { color: #fff; }
.rf-ps__item-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s var(--rf-ease), opacity .4s var(--rf-ease);
}
.rf-ps__item.is-active .rf-ps__item-detail { max-height: 240px; opacity: 1; }
.rf-ps__detail-pad { padding: 16px 0 0 32px; max-width: 460px; }
.rf-ps__problem-label { font-weight: 800; font-size: 15px; color: var(--rf-red-light); margin-bottom: 10px; }
.rf-ps__problem-text { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
.rf-ps__bar { margin-top: 20px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
.rf-ps__bar-fill { height: 100%; width: 0; background: var(--rf-red); }
.rf-ps__item.is-active .rf-ps__bar-fill { animation: rf-ps-progress 7.2s linear forwards; }
@keyframes rf-ps-progress { from { width: 0; } to { width: 100%; } }

.rf-ps__panel {
  position: relative;
  height: 500px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--rf-terminal);
  overflow: hidden;
}
.rf-ps__panel-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 15%, rgba(167,37,44,0.16), transparent 60%);
}
.rf-ps__ghost {
  position: absolute; right: 28px; bottom: 4px;
  font-weight: 900; font-size: 150px; line-height: 1;
  color: rgba(255,255,255,0.035);
  user-select: none; pointer-events: none;
}
.rf-ps__panel-body { position: relative; height: 100%; padding: 32px; display: flex; flex-direction: column; }
.rf-ps__panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.rf-ps__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--rf-red-light); }
.rf-ps__panel-head-text { font-weight: 800; font-size: 15px; color: rgba(255,255,255,0.7); }
.rf-ps__lead {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 470px;
  min-height: 100px;
}
.rf-ps__caret {
  display: inline-block;
  width: 3px; height: 0.82em;
  background: var(--rf-red-light);
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 999px;
  animation: rf-ps-blink 0.9s linear infinite;
}
@keyframes rf-ps-blink { 0%,45% { opacity: 1; } 55%,100% { opacity: 0; } }
.rf-ps__steps { margin-top: auto; display: flex; flex-direction: column; }
.rf-ps__step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
}
.rf-ps__step.is-in { animation: rf-ps-step-in .45s var(--rf-ease) forwards; }
@keyframes rf-ps-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.rf-ps__step-num { font-family: var(--rf-font-mono); font-size: 12px; color: var(--rf-red-light); letter-spacing: 0.1em; padding-top: 2px; flex-shrink: 0; }
.rf-ps__step-text { font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.5; }

@media (min-width: 1024px) {
  .rf-ps { padding: 128px 48px; }
  .rf-ps__h2 { font-size: 60px; }
  .rf-ps__sub { font-size: 19px; }
  .rf-ps__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 56px; }
  .rf-ps__selector { height: 520px; }
  .rf-ps__item-title { font-size: 22px; }
  .rf-ps__panel { height: 520px; }
  .rf-ps__panel-body { padding: 44px; }
  .rf-ps__ghost { font-size: 190px; }
  .rf-ps__lead { font-size: 27px; min-height: 136px; }
  .rf-ps__step-text { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .rf-ps__h2 { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-ps__item.is-active .rf-ps__bar-fill { animation: none; width: 100%; }
  .rf-ps__caret { display: none; }
  .rf-ps__step { opacity: 1; animation: none; }
}

/* ---------------------------------------------------------------------------
   AI FRAMEWORK  (AIFramework.tsx)  path (light) + destination (dark)
--------------------------------------------------------------------------- */
.rf-fw-path {
  background: var(--rf-paper);
  border-top: 1px solid var(--rf-border);
  border-bottom: 1px solid var(--rf-border);
  padding: 96px 24px;
}
.rf-fw-path__inner { max-width: 1300px; margin-inline: auto; }
.rf-fw-path__head { max-width: 820px; }
.rf-fw-path__h2 { font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; color: var(--rf-ink); }
.rf-fw-path__lead { margin-top: 20px; font-size: 15.5px; color: var(--rf-gray-3); line-height: 1.65; max-width: 640px; }
.rf-fw-path__steps { position: relative; margin-top: 56px; }
.rf-fw-path__connector { display: none; }
.rf-fw-path__grid { display: grid; gap: 36px; }
.rf-fw-node {
  width: 56px; height: 56px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px;
  position: relative; z-index: 1;
  background: var(--rf-red); border: 2px solid var(--rf-red); color: #fff;
}
.rf-fw-step.is-foundation .rf-fw-node { background: var(--rf-paper); border-color: var(--rf-ink); color: var(--rf-ink); }
.rf-fw-step__stage { font-weight: 800; font-size: 14px; color: var(--rf-red); margin: 16px 0 6px; }
.rf-fw-step__title { font-weight: 900; font-size: 19.5px; color: var(--rf-ink); line-height: 1.3; letter-spacing: -0.025em; }
.rf-fw-step__desc { margin-top: 8px; font-size: 13.5px; color: var(--rf-gray-3); line-height: 1.6; }
.rf-fw-step__link {
  display: inline-block; margin-top: 12px;
  font-size: 13.5px; font-weight: 800; color: var(--rf-red);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rf-red-light);
}
.rf-fw-step__link:hover { color: var(--rf-red-deep); }

.rf-fw-dest {
  position: relative;
  background: var(--rf-dark-3);
  padding: 80px 24px;
  overflow: hidden;
}
.rf-fw-dest__glow {
  position: absolute; top: -96px; right: -96px;
  width: 520px; height: 520px; border-radius: 999px;
  background: rgba(167,37,44,0.16); filter: blur(130px); pointer-events: none;
}
.rf-fw-dest__grid { position: relative; max-width: 1300px; margin-inline: auto; display: grid; }
.rf-fw-dest__rail {
  padding-bottom: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.rf-fw-dest__rail-label { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.rf-fw-dest__rail-label span:first-child { height: 3px; width: 36px; border-radius: 999px; background: var(--rf-red-light); }
.rf-fw-dest__rail-label span:last-child { font-weight: 800; font-size: 15px; color: var(--rf-red-light); line-height: 1; }
.rf-fw-dest__h3 { font-weight: 800; font-size: 30px; line-height: 1.06; letter-spacing: -0.03em; color: #fff; }
.rf-fw-dest__p { margin-top: 20px; font-size: 14.5px; color: rgba(255,255,255,0.55); line-height: 1.65; max-width: 340px; }
.rf-fw-dest__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; font-size: 14.5px; font-weight: 700; color: #fff; transition: color .2s var(--rf-ease); }
.rf-fw-dest__cta:hover { color: var(--rf-red-light); }
.rf-fw-dest__quads { display: grid; }
.rf-fw-quad { position: relative; padding: 32px; transition: background .2s var(--rf-ease); }
.rf-fw-quad:hover { background: rgba(255,255,255,0.03); }
.rf-fw-quad__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rf-fw-quad__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(167,37,44,0.14); border: 1px solid rgba(167,37,44,0.25);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .2s var(--rf-ease);
}
.rf-fw-quad__icon svg { width: 19px; height: 19px; color: var(--rf-red-light); transition: color .2s var(--rf-ease); }
.rf-fw-quad:hover .rf-fw-quad__icon { background: var(--rf-red); }
.rf-fw-quad:hover .rf-fw-quad__icon svg { color: #fff; }
.rf-fw-quad__ghost { font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -0.04em; color: rgba(255,255,255,0.09); user-select: none; transition: color .2s var(--rf-ease); }
.rf-fw-quad:hover .rf-fw-quad__ghost { color: rgba(196,73,80,0.3); }
.rf-fw-quad__title { margin-top: 24px; font-weight: 800; font-size: 17px; color: #fff; line-height: 1.25; letter-spacing: -0.01em; }
.rf-fw-quad__desc { margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.6; }

@media (min-width: 640px) {
  .rf-fw-dest__quads { grid-template-columns: 1fr 1fr; }
  .rf-fw-quad.q0, .rf-fw-quad.q2 { border-right: 1px solid rgba(255,255,255,0.09); }
  .rf-fw-quad.q0, .rf-fw-quad.q1 { border-bottom: 1px solid rgba(255,255,255,0.09); }
}
@media (min-width: 768px) {
  .rf-fw-path__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .rf-fw-path { padding: 112px 48px; }
  .rf-fw-path__h2 { font-size: 46px; }
  .rf-fw-path__grid { grid-template-columns: repeat(4, 1fr); }
  .rf-fw-path__connector {
    display: block; position: absolute;
    left: 28px; right: 10%; top: 28px; height: 2px;
    background: linear-gradient(to right, rgba(26,26,26,0.2), var(--rf-red-light), var(--rf-red));
  }
  .rf-fw-dest { padding: 96px 48px; }
  .rf-fw-dest__grid { grid-template-columns: 0.82fr 1.18fr; }
  .rf-fw-dest__rail { padding-bottom: 0; padding-right: 48px; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.09); }
  .rf-fw-dest__h3 { font-size: 38px; }
  .rf-fw-quad { padding: 40px; }
}

/* ---------------------------------------------------------------------------
   ENGAGEMENT TIMELINE  (EngagementTimeline.tsx)  "How we work"
--------------------------------------------------------------------------- */
.rf-tl {
  background: var(--rf-paper);
  border-top: 1px solid var(--rf-border);
  border-bottom: 1px solid var(--rf-border);
  padding: 96px 24px;
}
.rf-tl__grid { max-width: 1300px; margin-inline: auto; display: grid; gap: 48px; }
.rf-tl__intro-h2 { font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; color: var(--rf-ink); }
.rf-tl__intro-p { margin-top: 20px; font-size: 15px; color: var(--rf-gray-3); line-height: 1.6; }
.rf-tl__intro-cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rf-border); }
.rf-tl__rail { position: relative; }
.rf-tl__spine { position: absolute; left: 34px; top: 40px; bottom: 48px; width: 2px; background: rgba(26,26,26,0.1); border-radius: 999px; }
.rf-tl__fill { position: absolute; left: 34px; top: 40px; width: 2px; background: linear-gradient(to bottom, var(--rf-red), var(--rf-red-light)); border-radius: 999px; height: 0; }
.rf-tl__dot {
  position: absolute; left: 34px; top: 40px;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--rf-red); box-shadow: 0 0 12px 3px rgba(167,37,44,0.5);
  opacity: 0;
}
.rf-tl__phase { position: relative; display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 28px 0; align-items: start; }
.rf-tl__num-wrap { position: relative; display: flex; justify-content: center; }
.rf-tl__num {
  position: relative; z-index: 1;
  font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -0.04em;
  color: var(--rf-red); background: var(--rf-paper); padding: 8px 0;
}
.rf-tl__dur { font-weight: 700; font-size: 13px; color: var(--rf-gray-5); margin-bottom: 10px; }
.rf-tl__phase-title { font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: var(--rf-ink); margin-bottom: 8px; }
.rf-tl__phase-desc { font-size: 15px; color: var(--rf-gray-3); line-height: 1.6; max-width: 520px; }

@media (min-width: 1024px) {
  .rf-tl { padding: 112px 48px; }
  .rf-tl__grid { grid-template-columns: 340px 1fr; gap: 80px; }
  .rf-tl__intro { position: sticky; top: 128px; align-self: start; }
  .rf-tl__intro-h2 { font-size: 44px; }
  .rf-tl__spine, .rf-tl__fill, .rf-tl__dot { left: 50px; }
  .rf-tl__phase { grid-template-columns: 100px 1fr; gap: 36px; padding: 36px 0; }
  .rf-tl__num { font-size: 58px; }
  .rf-tl__phase-title { font-size: 30px; }
}

/* ---------------------------------------------------------------------------
   SOLUTION OFFERINGS  (SolutionOfferings.tsx)
--------------------------------------------------------------------------- */
.rf-so { background: var(--rf-dark); padding: 96px 24px; }
.rf-so__inner { max-width: 1300px; margin-inline: auto; }
.rf-so__head { max-width: 760px; }
.rf-so__h2 { font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.rf-so__sub { margin-top: 20px; font-size: 15.5px; color: rgba(255,255,255,0.6); line-height: 1.65; max-width: 620px; }
.rf-so__grid { display: grid; gap: 24px; margin-top: 48px; }
.rf-so__card {
  display: block;
  background: linear-gradient(to bottom, var(--rf-red), var(--rf-red-card-end));
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 14px 36px rgba(167,37,44,0.3);
  transition: transform .3s var(--rf-ease);
}
.rf-so__card:hover { transform: translateY(-4px); }
.rf-so__card-cat { font-weight: 700; font-size: 13px; color: var(--rf-red-tint); }
.rf-so__card-name { margin-top: 8px; font-weight: 800; font-size: 17px; color: #fff; line-height: 1.3; }
.rf-so__card-tag { margin-top: 8px; font-size: 13px; color: var(--rf-red-tint-2); line-height: 1.55; min-height: 42px; }
.rf-so__card-meta { margin-top: 16px; font-weight: 800; font-size: 13.5px; letter-spacing: 0.01em; color: #fff; }
.rf-so__card-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.rf-so__all {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 40px;
  border: 1px solid rgba(255,255,255,0.35); color: #fff; padding: 12px 24px;
  border-radius: 12px; font-size: 14px; font-weight: 600;
  transition: border-color .2s var(--rf-ease);
}
.rf-so__all:hover { border-color: #fff; }

@media (min-width: 768px) { .rf-so__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .rf-so { padding: 112px 48px; }
  .rf-so__h2 { font-size: 46px; }
  .rf-so__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------------
   CASE ARCHETYPE  (CaseArchetype.tsx)  "Client stories"
--------------------------------------------------------------------------- */
.rf-ca { background: var(--rf-paper); padding: 80px 24px; overflow: hidden; }
.rf-ca__inner { max-width: 1300px; margin-inline: auto; }
.rf-ca__head { max-width: 760px; margin-bottom: 48px; }
.rf-ca__h2 { font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -0.02em; color: var(--rf-ink); }
.rf-ca__grid { display: grid; gap: 20px; align-items: stretch; }
.rf-ca__card {
  background: #fff; border: 1px solid var(--rf-border); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column;
  transition: transform .3s var(--rf-ease), box-shadow .3s var(--rf-ease);
}
.rf-ca__card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -26px rgba(26,27,25,0.3); }
.rf-ca__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.rf-ca__mono {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--rf-dark-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; letter-spacing: -0.02em; flex-shrink: 0;
}
.rf-ca__quote-icon { color: rgba(167,37,44,0.3); }
.rf-ca__quote { font-size: 15px; color: #3A3B39; line-height: 1.7; flex: 1; }
.rf-ca__foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rf-border); }
.rf-ca__name { font-weight: 700; font-size: 14px; color: var(--rf-ink); }
.rf-ca__meta { font-weight: 500; font-size: 13px; color: var(--rf-gray-5); margin-top: 6px; line-height: 1.6; }
.rf-ca__see { margin-top: 48px; }
.rf-ca__see a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--rf-red); }

@media (min-width: 768px) {
  .rf-ca__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
  .rf-ca { padding: 112px 48px; }
  .rf-ca__h2 { font-size: 40px; }
  .rf-ca__card { padding: 32px; }
}

/* ---------------------------------------------------------------------------
   APPROACH  (Approach.tsx)  "A partner, not a vendor."
--------------------------------------------------------------------------- */
.rf-ap { background: var(--rf-dark-2); color: #fff; padding: 96px 24px; overflow: hidden; }
.rf-ap__inner { max-width: 1300px; margin-inline: auto; }
.rf-ap__head { display: grid; gap: 32px; align-items: end; margin-bottom: 64px; }
.rf-ap__h2 { font-weight: 800; font-size: 40px; line-height: 1.0; letter-spacing: -0.03em; color: #fff; }
.rf-ap__triad { margin-top: 28px; font-weight: 700; font-size: 15px; color: rgba(255,255,255,0.55); }
.rf-ap__intro { font-size: 15px; color: var(--rf-gray-7); line-height: 1.7; }
.rf-ap__intro p + p { margin-top: 12px; }
.rf-ap__grid { display: grid; gap: 40px 48px; border-top: 1px solid var(--rf-approach-border); padding-top: 48px; }
.rf-ap__item { display: flex; gap: 20px; }
.rf-ap__num { font-weight: 800; font-size: 24px; line-height: 1; color: var(--rf-red-light); flex-shrink: 0; width: 36px; padding-top: 2px; }
.rf-ap__item-h { font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.rf-ap__item-p { font-size: 14px; color: var(--rf-gray-6); line-height: 1.65; }
@media (min-width: 640px) { .rf-ap__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .rf-ap { padding: 128px 48px; }
  .rf-ap__head { grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 80px; }
  .rf-ap__h2 { font-size: 64px; }
  .rf-ap__triad { font-size: 16.5px; }
  .rf-ap__intro { font-size: 16px; }
  .rf-ap__grid { gap: 56px 48px; padding-top: 64px; }
  .rf-ap__item-h { font-size: 19px; }
  .rf-ap__item-p { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   REXQL  (RexQLSection.tsx)  "Meet Rex."
--------------------------------------------------------------------------- */
.rf-rx { position: relative; padding: 64px 24px; background: var(--rf-paper); overflow: hidden; }
.rf-rx__glow { position: absolute; top: 0; right: 0; width: 600px; height: 600px; background: radial-gradient(circle, rgba(167,37,44,0.07), transparent 60%); filter: blur(40px); pointer-events: none; }
.rf-rx__inner { max-width: 1300px; margin-inline: auto; position: relative; z-index: 10; }
.rf-rx__top { display: grid; gap: 40px; align-items: center; }
.rf-rx__h2 { font-weight: 800; font-size: 32px; line-height: 1.06; letter-spacing: -0.03em; color: var(--rf-ink); margin-bottom: 20px; }
.rf-rx__p { font-size: 16px; color: var(--rf-gray-3); line-height: 1.65; max-width: 480px; margin-bottom: 32px; }
.rf-rx__media { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 1px solid rgba(26,26,26,0.08); box-shadow: 0 30px 70px -34px rgba(0,0,0,0.35); }
.rf-rx__media img { width: 100%; height: 100%; object-fit: cover; }
.rf-rx__features { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(26,26,26,0.1); display: grid; gap: 32px; }
.rf-rx__feat { display: flex; align-items: flex-start; gap: 14px; }
.rf-rx__feat-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(167,37,44,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rf-rx__feat-icon svg { width: 20px; height: 20px; color: var(--rf-red); }
.rf-rx__feat-h { font-weight: 700; font-size: 15px; color: var(--rf-ink); margin-bottom: 4px; }
.rf-rx__feat-p { font-size: 13.5px; color: var(--rf-gray-3); line-height: 1.55; }
@media (min-width: 640px) { .rf-rx__features { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .rf-rx { padding: 96px 48px; }
  .rf-rx__top { grid-template-columns: 1fr 1.15fr; gap: 64px; }
  .rf-rx__h2 { font-size: 48px; }
  .rf-rx__p { font-size: 17px; }
}

/* ---------------------------------------------------------------------------
   FAQ  (FAQ.tsx)
--------------------------------------------------------------------------- */
.rf-faq { padding: 64px 24px; background: var(--rf-dark); border-top: 1px solid rgba(255,255,255,0.06); }
.rf-faq__inner { max-width: 1100px; margin-inline: auto; }
.rf-faq__head { margin-bottom: 40px; text-align: center; max-width: 42rem; margin-inline: auto; }
/* FAQ head now uses the shared .rf-section-label.is-dark.is-center (the one-off eyebrow is retired). */
.rf-faq__head .rf-section-label { justify-content: center; margin-bottom: 16px; }
.rf-faq__h3 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.08; letter-spacing: -0.02em; }
.rf-faq__sub { font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 560px; margin-inline: auto; }
.rf-faq__grid { display: grid; gap: 16px; }
.rf-faq__item {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  border-radius: 16px; padding: 24px; cursor: pointer;
  transition: border-color .3s var(--rf-ease), background .3s var(--rf-ease);
}
.rf-faq__item:hover { border-color: rgba(255,255,255,0.2); }
.rf-faq__item.is-open { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.rf-faq__q-row {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  /* Real button (keyboard-operable accordion): reset chrome, inherit type. */
  width: 100%; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.rf-faq__q-row:focus-visible { outline: 2px solid var(--rf-red-light); outline-offset: 4px; border-radius: 8px; }
.rf-faq__q { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.4; }
.rf-faq__toggle {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .5s var(--rf-ease), background .5s var(--rf-ease), border-color .5s var(--rf-ease);
}
.rf-faq__item.is-open .rf-faq__toggle { transform: rotate(45deg); background: var(--rf-red); border-color: transparent; }
.rf-faq__a-wrap { overflow: hidden; max-height: 0; transition: max-height .4s var(--rf-ease); }
.rf-faq__item.is-open .rf-faq__a-wrap { max-height: 320px; }
.rf-faq__a { font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.7; padding-top: 20px; }
@media (min-width: 1024px) {
  .rf-faq { padding: 80px 48px; }
  .rf-faq__h3 { font-size: 42px; }
  .rf-faq__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .rf-faq__item { padding: 28px; }
}

/* ---------------------------------------------------------------------------
   CTA  (CTA.tsx)  "Start with one free hour."
--------------------------------------------------------------------------- */
.rf-cta { position: relative; padding: 64px 24px; text-align: center; overflow: hidden; background: var(--rf-red); }
.rf-cta__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 25%, rgba(255,255,255,0.12), transparent 70%); }
.rf-cta__dark { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, transparent, var(--rf-red-deep)); }
.rf-cta__inner { position: relative; z-index: 10; max-width: 680px; margin-inline: auto; }
.rf-cta__h2 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 20px; line-height: 1.06; letter-spacing: -0.02em; }
.rf-cta__h2 em { color: rgba(255,255,255,0.95); font-style: normal; }
.rf-cta__p { font-size: 17px; color: rgba(255,255,255,0.8); line-height: 1.65; margin-bottom: 32px; max-width: 500px; margin-inline: auto; }
.rf-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--rf-red);
  padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 600;
  transition: transform .3s var(--rf-ease), box-shadow .3s var(--rf-ease);
}
.rf-cta__btn:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0,0,0,0.3); }
.rf-cta__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.rf-cta__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px; padding: 10px 16px; font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500;
}
.rf-cta__badge svg { width: 16px; height: 16px; color: #fff; }
@media (min-width: 768px) { .rf-cta__h2 { font-size: 40px; } }
@media (min-width: 1024px) { .rf-cta { padding: 80px 48px; } .rf-cta__h2 { font-size: 44px; } }

/* Mobile tap targets (audit SW-05): quiet text links measure ~22px tall at
   375; padding grows the hit area without changing the visual weight. */
@media (max-width: 767px) {
  .rf-hero__cta-secondary, .rf-zz__cta, .rf-fw-step__link, .rf-fw-dest__cta { padding-block: 10px; }
}

@media (max-width: 767px) {
  .rf-ca__see a { display: inline-flex; padding-block: 10px; }
}

/* ===========================================================================
   MOBILE UX PASS (2026-07-18). All rules mobile-breakpoint-gated; desktop
   (>=1024 / >=768 overrides above) is untouched.
=========================================================================== */

/* HOME-M01: What We Solve panel, kill the fixed 500px heights below desktop so
   the lead can't collide with the bottom-pinned steps (text-on-text at 360),
   and drop the selector's centered dead band. The 2-col grid only exists at
   >=1024, so <=1023 is exactly the stacked range. */
@media (max-width: 1023px) {
  .rf-ps__selector { height: auto; }
  .rf-ps__panel { height: auto; }
  .rf-ps__panel-body { height: auto; }
  .rf-ps__lead { min-height: 0; }
  .rf-ps__steps { margin-top: 32px; }
}

@media (max-width: 767px) {
  /* HOME-M04: hero credential blurbs were 12px in ~150px columns. */
  .rf-hero__stat-desc { font-size: 13.5px; line-height: 1.45; }

  /* HOME-M05: desktop-tuned support copy carried to the phone; lift multi-line
     reading copy to the 15px floor. */
  .rf-ps__problem-text,
  .rf-fw-step__desc,
  .rf-fw-quad__desc,
  .rf-fw-dest__p,
  .rf-ap__item-p,
  .rf-rx__feat-p { font-size: 15px; }
  .rf-so__card-tag { font-size: 14px; min-height: 0; }

  /* HOME-M07: the 120px marquee fades ghosted 64% of a 375 viewport. */
  .rf-logos__fade { width: 48px; }

  /* HOME-M08: give the CRT screen the same 24px gutter as every other block. */
  .rf-hero__screen { width: calc(100% - 48px); }
}