.f-rs { position: relative; padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 48px); }
.f-rs-light {
  background: var(--brand-bg, #FCFCFC);
  color: var(--brand-ink, #333);
  --f-rs-ink: var(--brand-ink-strong, #1A1A1A);
  --f-rs-quiet: var(--f-quiet-ink);
  --f-rs-card: var(--f-card-bg, #FFFFFF);
  --f-rs-rule: color-mix(in oklab, var(--f-ink-base, #1A1A1A), transparent 90%);
  --f-rs-rule-on: color-mix(in oklab, var(--f-ink-base, #1A1A1A), transparent 78%);
  --f-rs-accent: var(--f-accent-ink, var(--brand-accent, #0074C8));
  --f-rs-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.4);
}
.f-rs-dark {
  background: var(--brand-surface-dark, #1A1A1A);
  color: var(--brand-ink-on-dark, #FCFCFC);
  --f-rs-ink: var(--brand-ink-on-dark, #FCFCFC);
  --f-rs-quiet: rgba(255, 255, 255, 0.68);
  --f-rs-card: color-mix(in oklab, var(--brand-surface-dark, #1A1A1A), black 20%);
  --f-rs-rule: rgba(255, 255, 255, 0.10);
  --f-rs-rule-on: rgba(255, 255, 255, 0.26);
  --f-rs-accent: var(--brand-accent-bright, var(--brand-accent, #0A99FF));
  --f-rs-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.8);
}
.f-rs-dark h2, .f-rs-dark h3 { color: inherit; }
.f-rs-inner { position: relative; width: min(1240px, 100%); margin-inline: auto; }
.f-rs-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.f-rs-kicker {
  margin: 0 auto 12px;
  max-width: none;
  font-size: var(--f-text-caption, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f-rs-accent);
}
.f-rs-title { margin: 0 0 10px; font-size: var(--f-h2, clamp(1.75rem, 3.6vw, 2.375rem)); color: var(--f-rs-ink); }
.f-rs-intro { margin: 0 auto; max-width: 56ch; font-size: var(--f-text, 1rem); color: var(--f-rs-quiet); }
.f-rs-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(12px, 1.5vw, 18px); }
.f-rs-cell { display: flex; }
.f-rs-card {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--f-rs-rule);
  border-radius: 14px;
  background: var(--f-rs-card);
  box-shadow: var(--f-rs-shadow);
}
.f-rs-icon { display: block; height: 40px; min-width: 0; min-height: 0; margin-bottom: 16px; color: var(--f-rs-accent); }
.f-rs-icon svg { display: block; width: auto; height: 40px; }
.f-rs-card-title { margin: 0 0 8px; font-size: var(--f-h5, 1.15rem); letter-spacing: 0.02em; color: var(--f-rs-ink); }
.f-rs-body { margin: 0; max-width: 42ch; font-size: var(--f-text-small, 0.9375rem); line-height: 1.6; color: var(--f-rs-quiet); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .f-rs-cell, .f-rs-photo, .f-rs-slat {
      animation: f-rs-rise linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 4%) entry calc(52% + var(--i, 0) * 4%);
    }
    @keyframes f-rs-rise {
      from { opacity: 0; translate: 0 14px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
    .f-rs-cell, .f-rs-photo, .f-rs-slat {
      animation-range: entry calc(var(--i, 0) * 3%) cover calc(28% + var(--i, 0) * 3%);
    }
  }
}
.f-rs-mgrid { position: relative; grid-template-columns: minmax(0, 1fr); }
.f-rs-slab {
  position: absolute;
  top: 0; left: 0;
  width: var(--w, 0px);
  height: var(--h, 0px);
  translate: var(--x, 0px) var(--y, 0px);
  border-radius: 20px;
  background: var(--f-rs-slabc, var(--brand-surface-raised, color-mix(in oklab, var(--brand-bg, #FCFCFC), var(--f-ink-base, #1A1A1A) 8%)));
  opacity: 0;
  pointer-events: none;
  transition: translate 0.32s var(--f-ease, ease), opacity 0.15s ease 0.2s;
}
.f-rs-dark { --f-rs-slabc: color-mix(in oklab, var(--brand-surface-dark, #1A1A1A), white 9%); }
.f-rs-live .f-rs-slab.is-on {
  opacity: 1;
  transition: translate 0.32s var(--f-ease, ease), opacity 0.15s ease;
}
.f-rs-live .f-rs-cell.is-on .f-rs-card { border-color: var(--f-rs-rule-on); }
.f-rs-v-mosaic:not(.f-rs-live) .f-rs-card { transition: border-color 0.25s ease, background-color 0.25s ease; }
.f-rs-v-mosaic:not(.f-rs-live) .f-rs-cell:hover .f-rs-card { border-color: var(--f-rs-rule-on); }
.f-rs-photo { margin: 0; overflow: hidden; border-radius: 14px; min-height: 240px; }
.f-rs-img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 901px) {
  .f-rs-mgrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr));
  }
  .f-rs-photo { grid-column: 3; grid-row: 1 / -1; min-height: 0; }
  .f-rs-side-left .f-rs-photo { grid-column: 1; }
  .f-rs-side-left .f-rs-mgrid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
  .f-rs-side-left .f-rs-cell:nth-of-type(odd) { grid-column: 2; }
  .f-rs-side-left .f-rs-cell:nth-of-type(even) { grid-column: 3; }
}
@media (min-width: 620px) and (max-width: 900px) {
  .f-rs-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-rs-photo { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@property --f-rs-rv { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.f-rs-v-slats { overflow: clip; color: #fff; --f-rs-ink: #fff; --f-rs-quiet: rgba(255, 255, 255, 0.82); }
.f-rs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-rs-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      color-mix(in oklab, #0C0C0C 74%, transparent) 0%,
      color-mix(in oklab, #0C0C0C 56%, transparent) 42%,
      color-mix(in oklab, #0C0C0C 92%, transparent) 100%);
}
.f-rs-v-slats .f-rs-title, .f-rs-v-slats .f-rs-card-title { color: #fff; }
.f-rs-v-slats .f-rs-kicker { color: var(--brand-accent-bright, var(--brand-accent, #0A99FF)); }
.f-rs-v-slats .f-rs-icon { color: var(--brand-accent-bright, var(--brand-accent, #0A99FF)); }
.f-rs-v-slats .f-rs-body { color: rgba(255, 255, 255, 0.86); }
.f-rs-slats { display: grid; gap: 12px; }
.f-rs-slat {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(10, 10, 10, 0.62);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  backdrop-filter: blur(0px) saturate(1);
}
.f-rs-slat-rule { display: none; }
@media (min-width: 1000px) {
  .f-rs-v-slats { padding-block: clamp(36px, 4vw, 56px); }
  .f-rs-v-slats .f-rs-head { margin-bottom: clamp(18px, 2.2vw, 28px); }
  .f-rs-slats {
    display: flex;
    align-items: stretch;
    height: clamp(330px, calc(100vh - 385px), 600px);
    height: clamp(330px, calc(100svh - 385px), 600px);
  }
  .f-rs-slat {
    flex: 1 1 0;
    min-width: 0;
    contain: layout paint;
    transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.6s ease, border-color 0.6s ease,
                -webkit-backdrop-filter 0.6s ease, backdrop-filter 0.6s ease;
  }
  .f-rs-slat-in {
    position: absolute;
    z-index: 1;
    left: clamp(22px, 2.6vw, 30px);
    bottom: clamp(22px, 2.6vw, 30px);
    width: clamp(126px, 12.5vw, 178px);
  }
  .f-rs-slat-in .f-rs-body {
    width: clamp(215px, 19.5vw, 295px);
    max-width: none;
  }
  .f-rs-slat .f-rs-body {
    --f-rs-rv: 14%;
    opacity: 0.62;
    -webkit-mask-image: linear-gradient(135deg, #000 var(--f-rs-rv), transparent calc(var(--f-rs-rv) + 14%));
    mask-image: linear-gradient(135deg, #000 var(--f-rs-rv), transparent calc(var(--f-rs-rv) + 14%));
    transition: opacity 0.45s ease, --f-rs-rv 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .f-rs-slat-rule {
    display: block;
    position: absolute;
    z-index: 1;
    left: clamp(22px, 2.6vw, 30px);
    bottom: 0;
    height: 3px;
    width: clamp(215px, 19.5vw, 295px);
    scale: 0 1;
    transform-origin: left center;
    background: var(--brand-accent-bright, var(--brand-accent, #0A99FF));
    transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (hover: hover) {
    .f-rs-slats:has(.f-rs-slat:hover) .f-rs-slat:not(:hover) {
      flex-grow: 0.9;
      background: rgba(8, 8, 8, 0.82);
      border-color: rgba(255, 255, 255, 0.08);
    }
    .f-rs-slat:hover, .f-rs-slat:focus-within {
      flex-grow: 1.6;
      background: rgba(16, 16, 18, 0.3);
      -webkit-backdrop-filter: blur(16px) saturate(0.92);
      backdrop-filter: blur(16px) saturate(0.92);
      border-color: rgba(255, 255, 255, 0.42);
    }
    .f-rs-slat:hover .f-rs-body, .f-rs-slat:focus-within .f-rs-body { opacity: 1; --f-rs-rv: 100%; }
    .f-rs-slat:hover .f-rs-slat-rule, .f-rs-slat:focus-within .f-rs-slat-rule { scale: 1 1; }
  }
  @media (hover: none) {
    .f-rs-slat .f-rs-body { opacity: 1; --f-rs-rv: 100%; }
  }
}
@media (max-width: 900px) {
  .f-rs-v-slats { padding-block: clamp(48px, 8vw, 72px); }
  .f-rs-slats { gap: 10px; }
}
@media (max-width: 619px) {
  .f-rs-card { padding: 20px 18px; }
  .f-rs-icon, .f-rs-icon svg { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
}