/* R&D page. Builds on services.css and projects.css (steps, cards, illustrations, status pill, CTA panel). */

/* Hero */
.rdx-hero {
  overflow: hidden;
  background-color: var(--surface-alt);
  background-image: linear-gradient(90deg, rgba(91, 157, 184, .055) 1px, transparent 1px), linear-gradient(0deg, rgba(91, 157, 184, .045) 1px, transparent 1px), radial-gradient(circle at 72% 45%, rgba(50, 112, 139, .28), transparent 42%);
  background-size: 96px 96px, 96px 96px, auto;
}
.rdx-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(36px, 5vw, 80px); padding-block: clamp(64px, 7vw, 110px); }
.rdx-hero-copy { border-top: 2px solid var(--blue); padding-top: 24px; }
.rdx-hero-copy .eyebrow { color: var(--blue); }
.rdx-hero-copy h1 { max-width: 620px; margin: 20px 0 22px; color: var(--ink); font-size: clamp(2.6rem, 4.3vw, 4.4rem); line-height: 1.05; letter-spacing: -.06em; }
.rdx-hero-copy h1 span { display: block; color: var(--blue); }
.rdx-hero-copy .page-lead { max-width: 580px; margin: 0; color: var(--hero-copy); }
.rdx-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 30px; padding: 0; list-style: none; }
.rdx-loop li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .8rem; font-weight: 700; }
.rdx-loop li::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--blue); border-radius: 50%; }
.rdx-loop li:not(:last-child)::after { content: ""; width: 26px; height: 1px; margin-left: 4px; background: var(--line); }
.rdx-hero-cta { gap: 22px; }

.rdx-hero-visual { position: relative; margin: 0; }
.rdx-hero-visual > img { width: 100%; height: clamp(360px, 36vw, 500px); border: 1px solid #3a5968; border-radius: 17px; object-fit: cover; box-shadow: 0 32px 90px rgba(4, 14, 22, .27); }
.rdx-hero-visual figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rdx-hero-visual figcaption span:first-child { color: var(--blue); }

/* Floating instrument panel */
.rdx-hud { position: absolute; left: clamp(-40px, -2.5vw, -16px); bottom: 38px; width: clamp(200px, 17vw, 240px); padding: 14px; border: 1px solid #4a6f80; border-radius: 14px; background: rgba(14, 29, 38, .9); box-shadow: 0 24px 60px rgba(3, 12, 18, .45); color: #acc3cf; backdrop-filter: blur(8px); animation: pf-float-c 8s ease-in-out infinite; }
.rdx-hud-top, .rdx-hud-bottom { display: flex; justify-content: space-between; gap: 8px; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.rdx-hud-top span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #d5ecf4; }
.rdx-hud-top i { width: 7px; height: 7px; border-radius: 50%; background: #8fd3c0; box-shadow: 0 0 0 4px rgba(143, 211, 192, .15); animation: hero-beacon 2.4s ease-in-out infinite; }
.rdx-hud-bottom { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2f4b59; color: #8fb3c2; }
.rdx-sky { display: block; width: 100%; height: auto; margin: 10px 0 6px; }
.rdx-sky .sky-ring { fill: none; stroke: #3c5f70; stroke-width: 1; }
.rdx-sky .sky-axis { stroke: #2f4b59; stroke-width: 1; }
.rdx-sky .sky-sat { fill: #d5f5ff; }
.rdx-sky .sky-sat-b { fill: #8fdcf5; }
.rdx-sky .sky-sat-c { fill: #8fd3c0; }
.rdx-sky .sky-center { fill: #6fc0dd; }
.rdx-sky .sky-pulse { fill: none; stroke: #6fc0dd; transform-box: fill-box; transform-origin: center; animation: rdx-pulse 2.4s ease-out infinite; }
.rdx-sky .sky-orbit { transform-box: view-box; transform-origin: 100px 100px; animation: rdx-orbit 40s linear infinite; }
.rdx-sky .sky-orbit-slow { animation-duration: 64s; animation-direction: reverse; }
.rdx-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.rdx-bars i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(#8fdcf5, #3d7f99); transform-origin: bottom; animation: rdx-bar 2.2s ease-in-out infinite; }
.rdx-bars i:nth-child(2n) { animation-duration: 2.8s; }.rdx-bars i:nth-child(3n) { animation-duration: 1.9s; }
.rdx-bars i:nth-child(1) { animation-delay: -.2s; }.rdx-bars i:nth-child(2) { animation-delay: -.9s; }.rdx-bars i:nth-child(3) { animation-delay: -.4s; }.rdx-bars i:nth-child(4) { animation-delay: -1.3s; }.rdx-bars i:nth-child(5) { animation-delay: -.7s; }
.rdx-bars i:nth-child(6) { animation-delay: -1.6s; }.rdx-bars i:nth-child(7) { animation-delay: -.1s; }.rdx-bars i:nth-child(8) { animation-delay: -1.1s; }.rdx-bars i:nth-child(9) { animation-delay: -.5s; }.rdx-bars i:nth-child(10) { animation-delay: -1.8s; }
@keyframes rdx-orbit { to { transform: rotate(360deg); } }
@keyframes rdx-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
@keyframes rdx-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* Method */
.rdx-method { background: var(--surface); }
.rdx-method-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: clamp(30px, 5vw, 70px); }
.rdx-method-note { display: flex; gap: 18px; padding: 24px; border: 1px solid var(--line); border-top: 2px solid var(--blue); border-radius: 12px; background: var(--card); }
.rdx-method-note .eyebrow { margin: 0; }
.rdx-method-note h3 { margin: 8px 0 6px; font-size: 1.2rem; }
.rdx-method-note p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .88rem; }

/* Method cycle: a comet travels the ring and lights each step in turn (12s loop, 3s per step) */
.rdx-cycle { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(30px, 5vw, 70px); margin-top: 44px; }
.rdx-ring { position: relative; width: 100%; max-width: 380px; margin-inline: auto; }
.rdx-ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 2; }
.ring-dash { fill: color-mix(in srgb, var(--blue) 5%, transparent); stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; }
.ring-comet { transform-box: view-box; transform-origin: 120px 120px; animation: rdx-orbit 12s linear infinite; }
.ring-arc { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 130 448; stroke-dashoffset: 130; transform-box: view-box; transform-origin: 120px 120px; transform: rotate(-90deg); }
.ring-head { fill: var(--blue); filter: drop-shadow(0 0 6px var(--blue)); }
.ring-node { fill: var(--surface); stroke: var(--blue); stroke-width: 1.5; animation: rdx-node 12s linear infinite; }
.ring-node-2, .rdx-cycle-step-2 { animation-delay: 3s !important; }
.ring-node-3, .rdx-cycle-step-3 { animation-delay: 6s !important; }
.ring-node-4, .rdx-cycle-step-4 { animation-delay: 9s !important; }
.ring-label { position: absolute; color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .06em; transform: translate(-50%, -50%); pointer-events: none; }
.ring-label-1 { top: 11.7%; left: 50%; }.ring-label-2 { top: 50%; left: 88.3%; }.ring-label-3 { top: 88.3%; left: 50%; }.ring-label-4 { top: 50%; left: 11.7%; }
.ring-center { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--blue); transform: translate(-50%, -50%); }
.ring-center .k-icon { width: 30px; height: 30px; }
.rdx-cycle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rdx-cycle-step { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); animation: rdx-step 12s linear infinite; }
.rdx-cycle-icon { display: grid; flex: 0 0 46px; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.rdx-cycle-step b { color: var(--blue); font-size: .7rem; letter-spacing: .14em; }
.rdx-cycle-step h3 { margin: 4px 0 8px; font-size: 1.15rem; }
.rdx-cycle-step p { margin: 0; color: var(--muted); font-size: .86rem; }
@keyframes rdx-node { 0% { fill: var(--blue); } 14%, 90% { fill: var(--surface); } 100% { fill: var(--blue); } }
@keyframes rdx-step { 0%, 20% { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); } 26%, 96% { border-color: var(--line); box-shadow: none; } 100% { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); } }

/* Research areas */
.rdx-themes { background: var(--surface-alt); }
.rdx-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.rdx-theme:hover { transform: none; box-shadow: none; border-color: var(--line); }
.rdx-theme:hover h3 { color: var(--ink); }


/* Current project */
.rdx-project { background: var(--surface); }
.rdx-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; margin-top: 30px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); color: var(--ink); transition: transform .25s, border-color .25s, box-shadow .25s; }
.rdx-feature:hover { transform: translateY(-5px); border-color: var(--blue); box-shadow: 0 28px 60px rgba(4, 14, 22, .24); }
.rdx-feature-photo { position: relative; min-height: 420px; overflow: hidden; }
.rdx-feature-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .75, .25, 1); }
.rdx-feature:hover .rdx-feature-photo img { transform: scale(1.04); }
.rdx-feature-photo span { position: absolute; left: 14px; bottom: 12px; padding: 4px 9px; border-radius: 5px; background: rgba(8, 18, 25, .78); color: #c3d8e1; font-size: .66rem; font-weight: 700; }
.rdx-feature-body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.5vw, 48px); }
.rdx-feature-body .pf-status { margin-top: 0; }
.rdx-feature-body h2 { margin: 18px 0 14px; font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.rdx-feature-lead { margin: 0 0 24px; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.rdx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0 0 20px; }
.rdx-facts > div { display: flex; flex-direction: column-reverse; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.rdx-facts dt { color: var(--muted); font-size: .74rem; font-weight: 700; }
.rdx-facts dd { margin: 0 0 4px; color: var(--blue); font-size: 2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.rdx-feature-body .constellations { margin: 0 0 20px; }
.rdx-feature-note { margin: 0 0 24px; color: var(--muted); font-size: .86rem; }
.rdx-feature-body .svc-card-link span { transition: transform .25s; }
.rdx-feature:hover .svc-card-link span { transform: translate(3px, -3px); }

/* Collaboration panel */
.rdx-collab { padding-top: 0; }
.rdx-collab .svc-cta-panel > div { flex: 1; }
.rdx-collab .svc-cta-panel p:not(.eyebrow) { max-width: 700px; margin: 14px 0 0; color: #c3d4dc; }

@media (max-width: 1100px) {
  .rdx-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rdx-hero-grid, .rdx-method-head, .rdx-feature, .rdx-cycle { grid-template-columns: 1fr; }
  .rdx-ring { max-width: 300px; }
  .rdx-hero-visual { max-width: 720px; }
  .rdx-hud { left: 16px; }
  .rdx-feature-photo { min-height: 300px; }
}
@media (max-width: 680px) {
  .rdx-hero-grid { padding-block: 44px 52px; }
  .rdx-hero-copy h1 { font-size: clamp(2.3rem, 10vw, 3.1rem); }
  .rdx-hero-cta { width: 100%; justify-content: space-between; }
  .rdx-hero-visual > img { height: 300px; }
  .rdx-hud { position: relative; left: auto; bottom: auto; width: auto; margin: -70px 14px 0; }
  .rdx-sky { max-width: 170px; margin-inline: auto; }
  .rdx-theme-grid { grid-template-columns: 1fr; }
  .rdx-feature-photo { min-height: 230px; }
  .rdx-method-note { flex-direction: column; }
  .rdx-cycle-list { grid-template-columns: 1fr; }
  .rdx-cycle-step { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .rdx-feature { transition: none; }
  .rdx-feature:hover, .rdx-feature:hover .rdx-feature-photo img { transform: none; }
  /* Signal bars and satellite glow stay alive as opacity changes only. */
  .rdx-bars i { animation: svc-blink-soft 2.2s ease-in-out infinite !important; }
  .rdx-hud-top i { animation: hero-beacon 2.4s ease-in-out infinite !important; }
  /* The cycle keeps its colour-only highlight; the comet stays still. */
  .ring-node, .rdx-cycle-step { animation-duration: 12s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; }
  .ring-node { animation-name: rdx-node !important; }
  .rdx-cycle-step { animation-name: rdx-step !important; }
}