/* REDCOWEB 2026 / Brand system v13
   Global UI palette, compact typography and Icons8 presentation.
   Project photography keeps its original color grading. */
:root {
  --rw13-ink: #17243c;
  --rw13-body: #59657b;
  --rw13-accent: #3f5bd9;
  --rw13-accent-2: #7357df;
  --rw13-accent-deep: #253a9d;
  --rw13-line: #dfe4f2;
  --rw13-soft: #f5f7ff;
  --rw13-lilac: #f0edff;
  --rw13-warm: #fff9f4;
  --rw13-coral: #ee7a64;
  --rw13-shadow: 0 24px 70px -46px rgba(35, 49, 103, .42);
}

html { scroll-padding-top: 94px; }
body { color: var(--rw13-ink); }
:focus-visible { outline: 3px solid rgba(63, 91, 217, .42) !important; outline-offset: 4px; }

/* A tighter, calmer hierarchy across public pages. */
#main h1:not(.aiw-empty h1) {
  font-size: clamp(30px, 3.1vw, 46px) !important;
  line-height: 1.45 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}
#main h2 {
  font-size: clamp(22px, 2.15vw, 32px) !important;
  line-height: 1.58 !important;
  letter-spacing: -.018em !important;
  text-wrap: balance;
}
#main h3 {
  font-size: clamp(16px, 1.35vw, 20px) !important;
  line-height: 1.65 !important;
}

/* Global cobalt brand accents replace the former green/teal interface. */
.rw-header-phone,
.main-nav .rw-game-link,
.public-locales a.active,
.rw-eyebrow,
.rd27-overline,
.rd27-kicker,
.rv9-eyebrow,
.rw-sv3-kicker,
.rw-ai2-kicker,
.rw-lux-footer a:hover,
.rv6-footer a:hover { color: var(--rw13-accent) !important; }

.public-locales a.active { background: var(--rw13-lilac) !important; }
.header-cta,
.button,
.rw-btn.red,
.rw-btn.primary,
.rd27-btn-primary,
.rv9-home-link,
.rw-ai2-btn-primary {
  background: linear-gradient(135deg, var(--rw13-accent), var(--rw13-accent-deep)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -20px rgba(48, 63, 169, .72) !important;
}

.main-nav .rw-game-link::before {
  content: "" !important;
  width: 17px;
  height: 17px;
  background: url('/media/icons8-v13/design.png') center / contain no-repeat;
}

.rw-icon img,
.rw-icons8-icon,
.rd27-card-icon img,
.rv6-trust-icon img,
.rv9-cap-symbol img,
.rv10-canvas-node i img,
.rw-lux-mini-icon img,
.rw-lux-contact-icon img,
.rw-lux-newsletter-icon img,
.rw-lux-feature-icon img {
  display: block;
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
}
.rw-icons8-icon { flex: 0 0 auto; }
.rw-lux-footer :is(.rw-lux-contact-icon, .rw-lux-newsletter-icon, .rw-lux-map-pin)::before,
.rw-lux-footer .rw-lux-newsletter-form button::before,
.rw-lux-footer .rw-lux-socials a::before { content: none !important; display: none !important; }
.rw-lux-footer :is(.rw-lux-contact-icon, .rw-lux-newsletter-icon, .rw-lux-map-pin),
.rw-lux-footer .rw-lux-socials a,
.rw-lux-footer .rw-lux-newsletter-form button { font-size: inherit !important; }

/* Common cards and controls. */
.rw-card,
.rw-feature,
.rw-contact-card,
.rw-form,
.rw-lux-footer article,
.rw-tech-strip span {
  border-color: var(--rw13-line) !important;
}
.rw-icon,
.rw-ai2-solution-icon,
.rw-ai2-usecase-icon,
.rv9-cap-symbol {
  background: var(--rw13-lilac) !important;
  color: var(--rw13-accent) !important;
  border-color: #d9d5f6 !important;
}

/* Homepage palette and section rhythm. */
#main .rh12-home {
  --rh-ink: var(--rw13-ink);
  --rh-body: var(--rw13-body);
  --rh-teal: var(--rw13-accent);
  --rh-line: var(--rw13-line);
  --rh-paper: #fbfcff;
  --rh-mist: radial-gradient(circle at 10% 20%, rgba(109, 92, 226, .11), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(238, 122, 100, .09), transparent 28%), #f6f8ff;
  --rh-warm: radial-gradient(circle at 92% 15%, rgba(238, 122, 100, .1), transparent 35%), #fffaf6;
}
#main .rh12-home h2 { font-size: clamp(22px, 2vw, 31px) !important; }
#main .rh12-home h3 { font-size: clamp(15px, 1.2vw, 19px) !important; }
#main .rh12-home .rd27-hero-copy h1 { font-size: clamp(31px, 2.75vw, 43px) !important; }
#main .rh12-home .rd27-hero {
  background: radial-gradient(circle at 7% 74%, rgba(115, 87, 223, .12), transparent 42%),
    radial-gradient(circle at 94% 12%, rgba(238, 122, 100, .08), transparent 34%), #fafbff !important;
}
#main .rh12-home :is(.rd27-btn, button, a):focus-visible { outline-color: rgba(63, 91, 217, .5) !important; }
#main .rh12-home :is(.rd27-btn-primary, .rv9-home-link) {
  background: linear-gradient(135deg, var(--rw13-accent), var(--rw13-accent-deep)) !important;
  box-shadow: 0 12px 28px -18px rgba(42, 57, 157, .75) !important;
}
#main .rh12-home :is(.rd27-service-card .rd27-card-icon, .rv10-canvas-node i) {
  background: var(--rw13-lilac) !important;
  border-color: #ded8fb !important;
}
#main .rh12-home .rv6-service-featured,
#main .rh12-home .rv11-cap-card.is-active {
  background: linear-gradient(145deg, #f3f0ff, #fff) !important;
  border-color: #8d80e7 !important;
}

/* Slow, seamless brand marquee. */
#main .rh12-home .rdv4-clients { overflow: hidden; background: #fff !important; }
#main .rh12-home .rdv4-clients-inner {
  grid-template-columns: minmax(210px, 24%) minmax(0, 76%) !important;
  gap: 24px;
}
.rv13-brand-window {
  position: relative;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rv13-brand-track {
  width: max-content;
  display: flex;
  align-items: center;
  animation: rw13BrandMarquee 44s linear infinite;
  will-change: transform;
}
.rv13-brand-window:is(:hover, :focus-within) .rv13-brand-track { animation-play-state: paused; }
.rv13-brand-set { display: flex; align-items: center; gap: clamp(34px, 4.5vw, 78px); padding-inline: clamp(22px, 3vw, 54px); }
#main .rh12-home .rv13-brand-set .rdv4-client-name {
  position: relative;
  color: #687188 !important;
  font-size: 13px;
  font-weight: 750;
}
#main .rh12-home .rv13-brand-set .rdv4-client-name::before {
  content: "";
  position: absolute;
  inset-inline-start: -17px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rw13-coral);
  transform: translateY(-50%);
  opacity: .65;
}
@keyframes rw13BrandMarquee { to { transform: translateX(-50%); } }
html[dir="rtl"] .rv13-brand-track { animation-direction: reverse; }

/* Showreel: organic cinema frame rather than a plain rectangle. */
#main .rh12-home .rv6-teaser {
  overflow: hidden;
  background: radial-gradient(circle at 14% 30%, rgba(115, 87, 223, .18), transparent 32%),
    radial-gradient(circle at 83% 80%, rgba(238, 122, 100, .12), transparent 28%), #f5f7ff !important;
}
#main .rh12-home .rv6-teaser::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  inset: auto -120px -170px auto;
  border: 1px solid rgba(63, 91, 217, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(63, 91, 217, .035), 0 0 0 88px rgba(63, 91, 217, .025);
  pointer-events: none;
}
#main .rh12-home .rv6-teaser-inner { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(44px, 7vw, 96px); }
#main .rh12-home .rv6-teaser-copy h2 { max-width: 390px; }
#main .rh12-home .rv13-showreel-frame {
  position: relative;
  overflow: visible;
  border: 0 !important;
  border-radius: 70px 28px 118px 30px / 52px 28px 86px 30px !important;
  padding: 8px;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,.58));
  box-shadow: 0 36px 90px -54px rgba(25, 33, 85, .62) !important;
  isolation: isolate;
}
#main .rh12-home .rv13-showreel-frame::before {
  content: "";
  position: absolute;
  inset: -18px 30px 20px -20px;
  z-index: -1;
  border-radius: 92px 32px 130px 38px / 68px 32px 94px 38px;
  background: linear-gradient(145deg, rgba(63, 91, 217, .25), rgba(115, 87, 223, .04) 50%, rgba(238, 122, 100, .17));
  transform: rotate(-2deg);
}
#main .rh12-home .rv13-showreel-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 62px 23px 108px 24px / 46px 23px 78px 24px;
  background: #121936;
}
.rv13-showreel-orbit {
  position: absolute;
  z-index: 3;
  width: 72px;
  height: 72px;
  inset: -25px auto auto 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b5acf5 38%, #5364d8 72%);
  box-shadow: 0 16px 35px -18px rgba(39, 49, 143, .8);
  pointer-events: none;
}
.rv13-showreel-note {
  position: absolute;
  z-index: 4;
  inset: auto 28px -14px auto;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  color: #fff;
  background: rgba(24, 33, 76, .86);
  backdrop-filter: blur(10px);
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: .12em;
}
.rv13-showreel-play {
  position: absolute;
  z-index: 5;
  inset: 50% 50% auto auto;
  transform: translate(50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 17px 10px 22px;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 999px !important;
  color: #fff;
  background: rgba(20, 29, 71, .78) !important;
  box-shadow: 0 20px 44px -24px #000 !important;
  backdrop-filter: blur(13px);
  cursor: pointer;
}
.rv13-showreel-play img { width: 29px; height: 29px; filter: brightness(0) invert(1); }
.rv13-showreel-play span { font-size: 12px; font-weight: 850; }
.rv13-showreel-frame.is-playing .rv13-showreel-play { opacity: 0; visibility: hidden; pointer-events: none; }

/* Capability command center: indigo editorial system. */
#main .rh12-home .rv11-capabilities {
  background: radial-gradient(circle at 10% 25%, rgba(115, 87, 223, .13), transparent 31%),
    radial-gradient(circle at 91% 73%, rgba(238, 122, 100, .08), transparent 29%), #f9f8ff !important;
}
#main .rh12-home .rv11-capabilities::before {
  background: linear-gradient(115deg, transparent 0 47%, rgba(63, 91, 217, .045) 47.2% 47.5%, transparent 47.7%) !important;
}
#main .rh12-home .rv11-cap-head { margin-bottom: 28px; }
#main .rh12-home .rv11-cap-head .rv9-home-heading { text-align: start; max-width: 650px; margin-inline: 0; }
#main .rh12-home .rv11-cap-head h2 { font-size: clamp(23px, 2vw, 30px) !important; }
#main .rh12-home .rv11-cap-status {
  border: 1px solid var(--rw13-line);
  background: rgba(255,255,255,.76);
  box-shadow: var(--rw13-shadow);
}
#main .rh12-home .rv11-cap-status i { background: var(--rw13-coral) !important; box-shadow: 0 0 0 5px rgba(238, 122, 100, .12); }
#main .rh12-home .rv11-cap-layout { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.35fr); gap: 28px; }
#main .rh12-home .rv11-cap-stage {
  min-height: 388px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 36px 20px 82px 24px;
  color: #fff;
  background: radial-gradient(circle at 20% 19%, rgba(162, 150, 255, .43), transparent 30%),
    linear-gradient(145deg, #18234d, #3045a8 56%, #7458df) !important;
  box-shadow: 0 34px 80px -48px rgba(30, 37, 107, .82) !important;
}
#main .rh12-home .rv11-cap-stage::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  inset: auto -100px -110px auto;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025);
}
#main .rh12-home .rv11-stage-grid {
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
}
#main .rh12-home .rv11-stage-orb {
  width: 116px;
  height: 116px;
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 18px rgba(255,255,255,.025), 0 0 46px rgba(180, 171, 255, .28);
}
#main .rh12-home .rv11-stage-orb img { width: 44px; height: 44px; filter: brightness(0) invert(1); }
#main .rh12-home .rv11-cap-stage h3 { color: #fff !important; font-size: 23px !important; }
#main .rh12-home .rv11-cap-stage p { color: #e8e9ff !important; }
#main .rh12-home .rv11-cap-stage small { color: #d8daf7 !important; }
#main .rh12-home .rv11-stage-meter { background: rgba(255,255,255,.18); }
#main .rh12-home .rv11-stage-meter i { background: linear-gradient(90deg, #fff, #ffc3b8) !important; }
#main .rh12-home .rv11-cap-grid { gap: 13px; }
#main .rh12-home .rv11-cap-card {
  min-height: 112px;
  border: 1px solid var(--rw13-line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 16px 44px -38px rgba(31, 43, 97, .4) !important;
}
#main .rh12-home .rv11-cap-card:hover { transform: translateY(-3px); border-color: #b7b0ef !important; }
#main .rh12-home .rv11-cap-card.is-active {
  border-color: #8173e0 !important;
  background: linear-gradient(145deg, #eeebff, #fff) !important;
  box-shadow: 0 20px 46px -34px rgba(68, 61, 174, .52) !important;
}
#main .rh12-home .rv11-cap-card strong { color: var(--rw13-ink); }
#main .rh12-home .rv11-cap-card small { color: var(--rw13-body) !important; }
#main .rh12-home .rv11-cap-card b img { width: 16px; height: 16px; }

/* Remaining homepage accents. */
#main .rh12-home .rv10-impact-canvas path { stroke: #887be1 !important; }
#main .rh12-home .rv10-canvas-halo { background: radial-gradient(circle, rgba(137, 123, 225, .34), rgba(137, 123, 225, .08) 55%, transparent 72%) !important; }
#main .rh12-home .rv10-canvas-core {
  border-color: #8d82df !important;
  background: linear-gradient(145deg, #2a3d9f, #18234d) !important;
}
#main .rh12-home .rv10-stack {
  background: radial-gradient(circle at 22% 60%, rgba(115, 87, 223, .36), transparent 48%), #151d42 !important;
}
#main .rh12-home .rv10-orbit-ring { border-color: rgba(154, 142, 238, .42) !important; }
#main .rh12-home .rv10-stack-center { background: linear-gradient(145deg, #fff, #d9d3ff) !important; color: #26377e !important; }
#main .rh12-home .rv10-stack-chip { background: #2a356b !important; border-color: #6470bd !important; color: #f7f5ff !important; }
body.is-home .rv6-footer { background: #f2f4fb !important; border-color: var(--rw13-line) !important; }

/* Inner public pages: remove remaining cool-green surfaces without tinting images. */
.rw5-inner-page #main :is(.rw-section-soft, .rw-page-soft, .rw-service-band, .rw-ai2-section-soft) { background: var(--rw13-soft) !important; }
.rw5-inner-page #main :is(.rw-tech-strip span, .rw-pill, .rw-chip, .rw-filter button.is-active) {
  border-color: #d8d7f2 !important;
  background: var(--rw13-lilac) !important;
  color: #394aa5 !important;
}
.rv6-footer-office { border-color: var(--rw13-line) !important; }
.rv6-office-map { background: #eef1fb !important; }
.rv6-office-details strong,
.rv6-office-details a,
.rv6-office-seal a { color: #293b83 !important; }

@media (max-width: 1000px) {
  #main .rh12-home .rdv4-clients-inner { grid-template-columns: 1fr !important; gap: 12px; padding-block: 17px; }
  #main .rh12-home .rv11-cap-layout { grid-template-columns: 1fr; }
  #main .rh12-home .rv11-cap-stage { min-height: 325px; }
}
@media (max-width: 900px) {
  #main h1:not(.aiw-empty h1) { font-size: clamp(28px, 7vw, 37px) !important; }
  #main h2 { font-size: clamp(21px, 5vw, 27px) !important; }
  #main .rh12-home .rd27-hero-copy h1 { font-size: clamp(28px, 6.6vw, 36px) !important; }
  #main .rh12-home .rv6-teaser-inner { grid-template-columns: 1fr; gap: 38px; }
  #main .rh12-home .rv13-showreel-frame { border-radius: 48px 20px 78px 22px / 38px 20px 62px 22px !important; }
  #main .rh12-home .rv13-showreel-frame video { border-radius: 42px 16px 70px 18px / 32px 16px 54px 18px; }
  .rv13-showreel-orbit { width: 54px; height: 54px; inset: -19px auto auto 28px; }
}
@media (max-width: 560px) {
  .rv13-brand-track { animation-duration: 34s; }
  #main .rh12-home .rv11-cap-grid { grid-template-columns: 1fr; }
  #main .rh12-home .rv11-cap-stage { border-radius: 28px 18px 60px 20px; }
  .rv13-showreel-play { min-height: 50px; padding: 8px 14px 8px 18px; }
  .rv13-showreel-play img { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv13-brand-track { animation: none !important; transform: none !important; }
}
