/* UI-SERVICES-01. Page-local presentation; shared styles remain untouched. */
/* The baseline body overflow-x:hidden creates an unintended scroll container.
   Clip only this page on x while leaving native viewport scrolling and sticky. */
.rn-services-page { overflow-x: clip; overflow-y: visible; }
.rn-services-page .site-shell { padding-top: 0; }
/* Initial header treatment is strictly local and released below the hero. */
.rn-services-page.rn-services-in-hero:not(.menu-open) .nav-shell {
  background: #0b17304d;
  border-color: #8bdcff24;
  box-shadow: none;
}
.rn-services-page.rn-services-in-hero:not(.menu-open) .brand-name,
.rn-services-page.rn-services-in-hero:not(.menu-open) .main-nav { color: #e8f1ff; }
.rn-services-page.rn-services-in-hero:not(.menu-open) .brand-accent,
.rn-services-page.rn-services-in-hero:not(.menu-open) .main-nav a:hover,
.rn-services-page.rn-services-in-hero:not(.menu-open) .main-nav a[aria-current="page"] { color: #8bdcff; }
.rn-services-page.rn-services-in-hero:not(.menu-open) .main-nav a::after { background: #8bdcff; }
.rn-services-page.rn-services-in-hero:not(.menu-open) .site-header .language-switcher {
  background: #152c4d80; border-color: #8bdcff38; box-shadow: none;
}
.rn-services-page.rn-services-in-hero:not(.menu-open) .site-header .lang-btn { color: #d3e2f5; }
.rn-services-page.rn-services-in-hero:not(.menu-open) .site-header .lang-btn.is-active { color: #fff; background: #3572b655; }
.rn-services-page.rn-services-in-hero:not(.menu-open) .menu-button { background: #152c4d; border-color: #8bdcff38; color: #e8f1ff; }
.rn-services-page .site-header .brand-name,
.rn-services-page .site-header .brand-accent,
.rn-services-page .site-header .main-nav,
.rn-services-page .site-header .language-switcher,
.rn-services-page .menu-button { transition: color 320ms ease, background 320ms ease, border-color 320ms ease; }
.rn-services-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 708px;
  padding: 176px 24px 100px;
  overflow: clip;
  background: radial-gradient(ellipse at 50% 48%, #142f59 0, #0b1730 52%, #071225 100%);
  color: #fff;
}
.rn-services-hero .rn-services-hero-copy {
  position: relative;
  z-index: 1;
  display: block;
  width: min(880px, 100%);
  text-align: center;
}
.rn-services-hero .eyebrow { color: #a6d7ff; margin-bottom: 22px; animation: rn-services-copy-in 650ms 1350ms both; }
.rn-services-hero h1 {
  max-width: 880px;
  margin: 0 auto 26px;
  color: #fff;
  font-size: clamp(36px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 2px 24px #071225;
  animation: rn-services-copy-in 850ms 1650ms both;
}
.rn-services-hero p {
  max-width: 700px;
  margin: 0 auto;
  color: #d3e2f5;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.7;
  text-wrap: pretty;
  text-shadow: 0 1px 12px #071225;
  animation: rn-services-copy-in 850ms 2050ms both;
}
.rn-services-orb-stage {
  --rn-services-radius: 340px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1000px;
  opacity: 0.85;
  mask-image: radial-gradient(ellipse, #000 40%, transparent 85%);
}
.rn-services-orb-arrival,
.rn-services-orb-response { position: absolute; inset: 0; transform-style: preserve-3d; }
.rn-services-orb-arrival { animation: rn-services-orb-birth 2300ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.rn-services-orb-response {
  transform: translate3d(var(--rn-services-drift-x, 0px), var(--rn-services-drift-y, 0px), 0) rotateX(var(--rn-services-tilt-x, 0deg)) rotateY(var(--rn-services-tilt-y, 0deg));
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rn-services-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: rn-services-rotate 36s linear infinite;
}
.rn-services-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: hsl(var(--rn-services-hue) 90% var(--rn-services-light));
  box-shadow: 0 0 6px currentColor;
  color: #70baff;
  opacity: 0;
  animation: rn-services-orbit 18s ease-in-out infinite;
  animation-delay: var(--rn-services-delay);
}
.rn-services-hero[data-rn-services-paused] .rn-services-orb,
.rn-services-hero[data-rn-services-paused] .rn-services-particle,
.rn-services-hero[data-rn-services-paused] .rn-services-orb-arrival { animation-play-state: paused; }
@keyframes rn-services-orb-birth {
  0% { opacity: 0; transform: scale(0.025); }
  15% { opacity: 0.6; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rn-services-copy-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rn-services-rotate {
  from { transform: rotateY(-20deg) rotateX(15deg); }
  to { transform: rotateY(340deg) rotateX(375deg); }
}
/* Orbital sequence inspired by Nate Wiley, https://codepen.io/natewiley/pen/GgONKy.
   Native variable-based implementation of the owner's supplied motion specification. */
@keyframes rn-services-orbit {
  0% { opacity: 0; transform: rotateZ(calc(-1 * var(--rn-services-z))) rotateY(var(--rn-services-y)) translateX(0px) rotateZ(var(--rn-services-z)); }
  20% { opacity: 0.85; }
  30%, 80% { opacity: 0.85; transform: rotateZ(calc(-1 * var(--rn-services-z))) rotateY(var(--rn-services-y)) translateX(var(--rn-services-radius)) rotateZ(var(--rn-services-z)); }
  100% { opacity: 0; transform: rotateZ(calc(-1 * var(--rn-services-z))) rotateY(var(--rn-services-y)) translateX(calc(var(--rn-services-radius) * 3)) rotateZ(var(--rn-services-z)); }
}
.rn-services-stack {
  --rn-services-header: 96px;
  position: relative;
  isolation: isolate;
  padding: 72px 24px 32px;
  /* Reuse the site's shared circuit surface (assets/images/backgrounds/circuit.png,
     as used on <body> in base.css). A stronger white overlay keeps it faint and
     bluish so the stacked white cards stay clearly readable above it. Painted on
     the section itself (not a stacking layer) so sticky/z-index stay intact. */
  background-color: #f5f7fb;
  background-image:
    linear-gradient(to bottom, rgba(245, 247, 251, 0.82), rgba(245, 247, 251, 0.86)),
    url("../assets/images/backgrounds/circuit.png");
  background-repeat: no-repeat, repeat;
  background-position: center top, center top;
  background-size: auto, 1120px auto;
}
.rn-services-rows { width: min(1160px, 100%); margin: 0 auto; }
.rn-services-row {
  position: relative;
  z-index: var(--rn-services-layer);
  padding-bottom: 24px;
  scroll-margin-top: var(--rn-services-header);
}
.rn-services-stack[data-rn-services-stack-ready] .rn-services-row {
  position: sticky;
  top: var(--rn-services-top, var(--rn-services-header));
}
.rn-services-row-surface {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 48px;
  align-items: start;
  gap: 28px;
  padding: 42px 40px;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 -6px 22px #0b173007;
  transform-origin: center top;
  transform: translateY(var(--rn-services-lift, 0px)) scale(var(--rn-services-scale, 1));
}
.rn-services-number {
  color: #0b1730;
  font-size: clamp(88px, 8vw, 112px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.075em;
  font-variant-numeric: tabular-nums;
}
.rn-services-row-content { min-width: 0; }
.rn-services-row h2 {
  margin: 0 0 28px;
  color: #0b1730;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 650;
  text-wrap: balance;
}
.rn-services-row-body { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); align-items: center; gap: 32px; }
.rn-services-row-image { display: block; width: 100%; height: 270px; object-fit: contain; }
.rn-services-row-copy p { margin: 0 0 20px; color: #43546d; font-size: 17px; line-height: 1.65; }
.rn-services-explore { display: inline-flex; align-items: center; min-height: 44px; color: #174bc4; font-weight: 650; border-bottom: 1px solid #a6bbea; }
.rn-services-arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #ccd8e8; border-radius: 50%; color: #174bc4; line-height: 1; transition: background 150ms, color 150ms; }
.rn-services-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rn-services-arrow:hover { background: #174bc4; color: #fff; }
/* Inner pieces reveal independently of the surface's scroll-linked transform. */
.rn-services-row[data-rn-services-reveal] :is(.rn-services-number, h2, .rn-services-row-image, .rn-services-row-copy p, .rn-services-explore, .rn-services-arrow) {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 600ms ease, translate 750ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--rn-services-reveal-delay, 0ms);
}
.rn-services-row[data-rn-services-reveal] h2 { --rn-services-reveal-delay: 90ms; }
.rn-services-row[data-rn-services-reveal] .rn-services-row-image { --rn-services-reveal-delay: 180ms; }
.rn-services-row[data-rn-services-reveal] .rn-services-row-copy p { --rn-services-reveal-delay: 270ms; }
.rn-services-row[data-rn-services-reveal] :is(.rn-services-explore, .rn-services-arrow) { --rn-services-reveal-delay: 360ms; }
.rn-services-row[data-rn-services-revealed] :is(.rn-services-number, h2, .rn-services-row-image, .rn-services-row-copy p, .rn-services-explore, .rn-services-arrow),
.rn-services-row[data-rn-services-reveal]:focus-within :is(.rn-services-number, h2, .rn-services-row-image, .rn-services-row-copy p, .rn-services-explore, .rn-services-arrow) { opacity: 1; translate: 0 0; }
.rn-services-row[data-rn-services-reveal]:focus-within :is(.rn-services-number, h2, .rn-services-row-image, .rn-services-row-copy p, .rn-services-explore, .rn-services-arrow) { transition: none; }
.rn-services-hero :focus-visible,
.rn-services-row :focus-visible,
.rn-services-dialog :focus-visible { outline: 3px solid #318bff; outline-offset: 5px; }
.rn-services-stack .rn-services-row:has(:focus-visible) .rn-services-row-surface { transform: none; }
/* All five source panels are readable in flow until dialog setup succeeds. */
.rn-services-details { padding-top: 24px; }
.rn-services-details .service-focus { margin-bottom: 32px; }
.rn-services-details[hidden],
.rn-services-dialog [data-service-panel][hidden],
.rn-services-hero [hidden] { display: none; }
.rn-services-dialog {
  width: min(1210px, calc(100% - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #b8ccea;
  border-radius: 24px;
  background: #f9fbff;
  color: #0b1730;
  box-shadow: 0 30px 100px #07122555;
}
.rn-services-dialog::backdrop { background: #07122599; backdrop-filter: blur(3px); }
.rn-services-dialog[open] { display: flex; flex-direction: column; animation: rn-services-detail-in 180ms ease-out; }
.rn-services-close { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #c2d3eb; border-radius: 50%; background: #fffffff2; color: #0b1730; cursor: pointer; }
.rn-services-close-icon { position: relative; width: 20px; height: 20px; }
.rn-services-close-icon::before,
.rn-services-close-icon::after { position: absolute; top: 50%; left: 50%; width: 18px; height: 1.5px; background: currentColor; content: ''; transform: translate(-50%, -50%) rotate(45deg); }
.rn-services-close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.rn-services-dialog-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.rn-services-dialog .service-focus { border: 0; border-radius: 0; box-shadow: none; }
.rn-services-dialog .service-focus__preview-copy { padding-right: 44px; }
/* Keep the detail's original typography, lists, process and CTAs. Only its
   layout changes so all former carousel slides read continuously. */
.rn-services-details .service-focus__carousel-controls,
.rn-services-dialog .service-focus__carousel-controls { display: none; }
.rn-services-details .service-focus__carousel-viewport,
.rn-services-dialog .service-focus__carousel-viewport { display: block; height: auto; overflow: visible; }
.rn-services-details .service-focus__inner,
.rn-services-dialog .service-focus__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr); align-items: start; gap: 24px 36px; min-height: 0; padding: 32px 40px 40px; overflow: visible; scroll-snap-type: none; }
.rn-services-details .service-focus__slide,
.rn-services-dialog .service-focus__slide { width: auto; min-width: 0; margin: 0; padding: 0; }
.rn-services-details .service-focus__slide--preview,
.rn-services-dialog .service-focus__slide--preview { display: contents; }
.rn-services-details .service-focus__slide--details,
.rn-services-dialog .service-focus__slide--details { display: block; grid-column: 1; grid-row: 2; }
.rn-services-details .service-focus__slide--process,
.rn-services-dialog .service-focus__slide--process { display: block; grid-column: 1; grid-row: 3; }
.rn-services-details .service-focus__preview-copy,
.rn-services-dialog .service-focus__preview-copy { grid-column: 1; grid-row: 1; }
.rn-services-details .service-focus__visual,
.rn-services-dialog .service-focus__visual { position: static; grid-column: 2; grid-row: 1 / span 3; width: 100%; height: auto; min-height: 0; max-height: none; align-self: center; transform: none; }
.rn-services-details .service-focus__visual img,
.rn-services-dialog .service-focus__visual img { width: 100%; max-width: 470px; height: auto; max-height: none; object-fit: contain; }
.rn-services-details .service-focus__actions .button,
.rn-services-dialog .service-focus__actions .button { min-width: 0; max-width: 100%; white-space: normal; }
@keyframes rn-services-detail-in { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .rn-services-row-surface { grid-template-columns: 80px minmax(0, 1fr) 48px; gap: 20px; padding: 32px 24px; }
  .rn-services-number { font-size: 80px; }
  .rn-services-arrow { width: 44px; height: 44px; }
  .rn-services-row-body { grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 20px; }
  .rn-services-row-image { height: 240px; }
  .rn-services-details .service-focus__inner,
  .rn-services-dialog .service-focus__inner { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .rn-services-details .service-focus__visual,
  .rn-services-dialog .service-focus__visual { grid-column: 1; grid-row: 2; }
  .rn-services-details .service-focus__visual img,
  .rn-services-dialog .service-focus__visual img { max-width: 280px; }
  .rn-services-details .service-focus__slide--details,
  .rn-services-dialog .service-focus__slide--details { grid-row: 3; }
  .rn-services-details .service-focus__slide--process,
  .rn-services-dialog .service-focus__slide--process { grid-row: 4; }
}
@media (max-width: 600px) {
  .rn-services-hero { min-height: 648px; padding: 156px 24px 80px; }
  .rn-services-hero h1 { font-size: clamp(34px, 8.8vw, 46px); line-height: 1.13; }
  .rn-services-orb-stage { --rn-services-radius: 240px; opacity: 0.8; }
  .rn-services-stack { padding: 40px 16px 16px; background-size: auto, 780px auto; }
  .rn-services-row { padding-bottom: 16px; }
  .rn-services-row-surface { grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 14px; padding: 24px 18px; }
  .rn-services-number { font-size: 60px; }
  .rn-services-row h2 { font-size: 27px; margin-bottom: 18px; }
  .rn-services-row-content { display: contents; }
  .rn-services-row h2 { grid-column: 2; grid-row: 1; }
  .rn-services-arrow { grid-column: 3; grid-row: 1; width: 44px; height: 44px; font-size: 27px; }
  .rn-services-row-body { grid-column: 1 / -1; display: block; }
  .rn-services-row-image { width: 190px; height: 210px; margin: 0 auto 20px; }
  .rn-services-row-copy p { font-size: 16px; line-height: 1.55; margin-bottom: 12px; }
  .rn-services-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .rn-services-dialog .service-focus__inner { padding: 28px 18px 30px; }
  .rn-services-dialog .rn-services-close { top: 12px; right: 12px; }
  .rn-services-dialog .service-focus h2 { font-size: 32px; overflow-wrap: anywhere; }
  .rn-services-dialog .service-focus__list-card li { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .rn-services-hero :is(.rn-services-orb-arrival, .eyebrow, h1, p) { animation: none; opacity: 1; transform: none; }
  .rn-services-hero .rn-services-orb-response { transition: none; transform: none; }
  .rn-services-row[data-rn-services-reveal] :is(.rn-services-number, h2, .rn-services-row-image, .rn-services-row-copy p, .rn-services-explore, .rn-services-arrow) { opacity: 1; translate: none; transition: none; }
  .rn-services-hero .rn-services-orb { animation: none; transform: rotateY(-20deg) rotateX(15deg); }
  .rn-services-hero .rn-services-particle { animation: none; opacity: 0.85; transform: rotateZ(calc(-1 * var(--rn-services-z))) rotateY(var(--rn-services-y)) translateX(var(--rn-services-radius)) rotateZ(var(--rn-services-z)); }
  .rn-services-stack[data-rn-services-stack-ready] .rn-services-row { position: relative; top: auto; }
  .rn-services-row .rn-services-row-surface { transform: none; }
  .rn-services-dialog[open] { animation: none; }
  .rn-services-arrow { transition: none; }
}