/* ===================================================================
   BRIDGPOINT — CONCEPT REDESIGN
   Same brand system as the live site (light, single bold accent purple,
   Space Grotesk + Inter) — new architecture, layout and motion built
   for GSAP/ScrollTrigger/Lenis/Three.js. Dark is used sparingly, as an
   intentional contrast moment (converge / final CTA / footer), exactly
   like the original site does.
   =================================================================== */

:root {
  /* palette — lifted directly from the live site's design system */
  --bg: #FAFAFC;
  --bg-1: #F3F0FF;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --line: rgba(20, 18, 31, 0.09);
  --line-2: rgba(20, 18, 31, 0.16);

  --ink: #14121F;
  --ink-70: rgba(20, 18, 31, 0.72);
  --ink-50: rgba(20, 18, 31, 0.45);
  --ink-30: rgba(20, 18, 31, 0.25);

  --accent: #6C4CFF;
  --accent-dark: #4B2FDB;
  --accent-2: #38bdf8;
  --accent-3: #ffd9a0;
  --accent-4: #ec4899;
  --accent-light: #8F73FF;
  --accent-soft: #EDE7FF;

  --grad-1: linear-gradient(135deg, #6C4CFF 0%, #38bdf8 100%);
  --grad-2: linear-gradient(135deg, #ec4899 0%, #6C4CFF 100%);
  --grad-final: linear-gradient(135deg, var(--accent-dark), var(--accent) 60%, #8A6BFF);

  /* the deliberate dark moments — same ink used as bg instead of text */
  --dark-bg: #14121F;
  --dark-ink: #ffffff;
  --dark-ink-70: rgba(255, 255, 255, 0.72);
  --dark-ink-50: rgba(255, 255, 255, 0.5);
  --dark-line: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 1px 2px rgba(20, 18, 31, 0.04), 0 2px 8px rgba(20, 18, 31, 0.05);
  --shadow-md: 0 4px 14px rgba(20, 18, 31, 0.06), 0 16px 40px rgba(20, 18, 31, 0.08);
  --shadow-accent: 0 12px 32px rgba(108, 76, 255, 0.28);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --container: 1360px;
  --gutter: clamp(20px, 5vw, 64px);

  --fs-hero: clamp(3.2rem, 8.6vw, 8.4rem);
  --fs-h2: clamp(2.2rem, 5.2vw, 4.6rem);
  --fs-h3: clamp(1.4rem, 2.4vw, 2rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  cursor: none;
}

@media (max-width: 860px),
(hover:none) {
  body {
    cursor: auto;
  }
}

/* body.product pages run their own custom-cursor JS (#bp-cursor-ring /
   #bp-cursor-dot in animations.js), so the system cursor is hidden here
   too — same as the rest of the site — to avoid showing both at once. */
@media (max-width: 860px),
(hover:none) {

  body.product,
  body.product button {
    cursor: auto;
  }
}

h1,
h2,
h3,
h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: none;
}

@media (max-width: 860px),
(hover:none) {
  button {
    cursor: pointer;
  }
}

svg {
  display: block;
}

.r-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  position: relative;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ============ scrollbar (webkit) ============ */
::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 10px;
}

/* ============ eyebrow ============ */
.r-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}

.r-eyebrow i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  flex: none;
}

.r-eyebrow-light {
  color: var(--dark-ink-70);
}

.r-eyebrow-light i {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

/* ===================================================================
   GRAIN OVERLAY
   =================================================================== */
.r-grain {
  position: fixed;
  inset: -100px;
  z-index: 999;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================================================================
   CUSTOM CURSOR
   =================================================================== */
.r-cursor-dot,
.r-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9000;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.r-cursor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.r-cursor-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), border-color .35s;
}

.r-cursor-ring.is-active {
  width: 88px;
  height: 88px;
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.08);
}

.r-cursor-ring.is-active .r-cursor-dot {
  opacity: 0;
}

.r-cursor-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}

.r-cursor-ring.is-active .r-cursor-label {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 860px),
(hover:none) {

  .r-cursor-dot,
  .r-cursor-ring {
    display: none;
  }
}

/* ===================================================================
   FIXED WEBGL LAYER
   Only ever visible during the converge section (see script.js), and
   even then clipped to the right half of the viewport — the copy is a
   left-aligned, max-width:640px column, so masking out the left side
   guarantees the sphere can never render under the text, regardless of
   how the 3D scene itself is framed.
   =================================================================== */
.r-webgl-fixed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}

.r-webgl-fixed.is-visible {
  opacity: 1;
  /* Hard backstop against the copy: nothing renders left of 50% of the
     viewport, regardless of how the 3D scene itself is framed. */
  clip-path: inset(0 0 0 50%);
}

@media (max-width: 1000px) {
  .r-webgl-fixed {
    display: none;
  }
}

/* ===================================================================
   NAV
   =================================================================== */
.r-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 22px 0;
  transform: translateY(0);
  transition: transform .5s var(--ease-out), background .4s, border-color .4s, padding .4s;
  border-bottom: 1px solid transparent;
}

.r-nav.is-scrolled {
  padding: 14px 0;
  background: rgba(250, 250, 252, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: var(--line);
}

.r-nav.is-hidden {
  transform: translateY(-110%);
}

.r-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.r-nav-logo img {
  height: 30px;
  width: auto;
  aspect-ratio: 1839 / 539;
}

.r-nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.r-nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-70);
  position: relative;
  padding: 4px 0;
}

.r-nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}

.r-nav-links a:hover {
  color: var(--ink);
}

.r-nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.r-nav-links a.active {
  color: var(--ink);
}

.r-nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
  background: var(--accent);
}

.r-nav-cta {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
}

.r-nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}

.r-nav-burger span {
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform .3s, opacity .3s;
}

.r-nav-burger.is-active span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.r-nav-burger.is-active span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ---- Services / Industries dropdowns ---- */
/* padding-bottom + matching negative margin extends .r-nav-item's actual
   hoverable box down through the visual gap to the dropdown, so moving
   the mouse from trigger to panel never crosses dead space that isn't
   part of any hovered element (which was closing the menu mid-transit).
   The negative margin cancels the padding's effect on layout/centering. */
.r-nav-item {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: -16px;
}

.r-nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.r-nav-caret {
  width: 13px;
  height: 13px;
  transition: transform .3s var(--ease-out);
}

.r-nav-item:hover .r-nav-caret,
.r-nav-item:focus-within .r-nav-caret {
  transform: rotate(180deg);
}

.r-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 0;
  transform: translate(-50%, 8px);
  width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
}

.r-nav-item:hover .r-nav-dropdown,
.r-nav-item:focus-within .r-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.r-nav-dropdown a {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.86rem;
  color: var(--ink-70);
  transition: background .2s, color .2s;
}

.r-nav-dropdown a::after {
  display: none;
}

.r-nav-dropdown a:hover {
  background: var(--bg-1);
  color: var(--ink);
}

.r-nav-dropdown-all {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 11px !important;
  font-weight: 600;
  color: var(--accent) !important;
}

.r-nav-dropdown-grid {
  width: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.r-nav-dropdown-grid .r-nav-dropdown-all {
  grid-column: 1 / -1;
}

.r-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 110px 32px 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .5s var(--ease-in-out);
}

.r-mobile-menu.is-open {
  transform: translateY(0);
}

.r-mobile-menu>a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.r-mobile-group {
  border-bottom: 1px solid var(--line);
}

.r-mobile-group>a {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  padding: 12px 0 6px;
}

.r-mobile-sublinks {
  display: flex;
  flex-direction: column;
  padding-bottom: 14px;
}

.r-mobile-sublinks a {
  font-size: 1rem;
  color: var(--ink-50);
  padding: 7px 0 7px 4px;
}

.r-mobile-sublinks a:hover {
  color: var(--ink);
}

/* ===================================================================
   HERO
   =================================================================== */
.r-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 96px;
  padding-bottom: 96px;
  overflow: hidden;
  background: var(--bg);
}

.r-hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* two soft blurred colour orbs, same language as the live site's .p-orb-1/.p-orb-2 */
.r-hero-glow {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 46vw;
  height: 46vw;
  max-width: 520px;
  max-height: 520px;
  z-index: 0;
  /* background: var(--accent-3); */
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
}

.r-hero::before {
  content: '';
  position: absolute;
  bottom: -2%;
  left: -2%;
  width: 32vw;
  height: 32vw;
  max-width: 340px;
  max-height: 340px;
  z-index: 0;
  /* background: var(--accent-light); */
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.32;
}

.r-hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black, transparent 80%);
}

.r-hero-inner {
  position: relative;
  z-index: 2;
}

.r-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 12px;
}

.r-hero-index {
  font-size: 0.78rem;
  color: var(--ink-30);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.r-hero-title {
  font-size: var(--fs-hero);
  overflow: hidden;
}

.r-hero-line {
  display: block;
  overflow: hidden;
}

.r-hero-line-inner {
  display: inline-block;
}

.r-hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  margin-top: 38px;
}

.r-hero-sub {
  max-width: 480px;
  font-size: 1.05rem;
  color: var(--ink-70);
  line-height: 1.6;
}

.r-hero-actions {
  display: flex;
  gap: 14px;
}

.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  transition: background .25s, color .25s, transform .25s var(--ease-out), box-shadow .25s;
}

.r-btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.r-btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.r-btn-ghost {
  border: 1px solid var(--line-2);
  color: var(--ink);
}

.r-btn-ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.r-btn span {
  position: relative;
  z-index: 1;
}

.r-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.r-scroll-cue-track {
  width: 1px;
  height: 46px;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
}

.r-scroll-cue-dot {
  position: absolute;
  left: -1.5px;
  top: -10px;
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent-2);
  animation: scrollDot 2.2s ease-in-out infinite;
}

@keyframes scrollDot {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(46px);
  }

  100% {
    transform: translateY(0);
  }
}

.r-scroll-cue span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-30);
}

/* ===================================================================
   MARQUEE
   =================================================================== */
.r-marquee-section {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
  position: relative;
  z-index: 2;
}

.r-marquee-row {
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  width: 100%;
  cursor: grab;
  touch-action: pan-y;
}

.r-marquee-row.is-dragging {
  cursor: grabbing;
}

.r-marquee-track {
  display: flex;
  gap: 80px;
  width: max-content;
  white-space: nowrap;
  align-items: center;
  will-change: transform;
  user-select: none;
}

.r-marquee-track img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.r-marquee-track span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-70);
}

.r-marquee-row[data-dir="right"] .r-marquee-track span {
  color: var(--ink);
}

/* fixed box + object-fit:contain gives every logo the same footprint
   regardless of its own aspect ratio (a wide wordmark like Microsoft
   and a compact mark like Apple end up reading the same visual size) */
.r-marquee-logo {

  object-fit: contain;
  flex: none;
  opacity: 0.9;
  transition: opacity .2s, transform .3s;
}

.r-marquee-logo:hover {
  opacity: 1;
  transform: scale(1.06);
}

/* ===================================================================
   PINNED STORYTELLING
   =================================================================== */
.r-story {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0;
}

.r-story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.r-story-title {
  font-size: var(--fs-h2);
  margin-top: 20px;
}

.r-story-copy {
  margin-top: 24px;
  font-size: 1.05rem;
  color: var(--ink-70);
  max-width: 420px;
  line-height: 1.65;
}

.r-story-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-story-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  opacity: 0.25;
  transform: translateX(40px);
}

/* four cards, four accent tints — cycles the same colour family used for
   the converge nodes (purple / cyan / pink / gold) instead of one flat
   white box for every card. */
.r-story-card:nth-child(4n+1) {
  background: rgba(108, 76, 255, 0.07);
  border-left-color: var(--accent);
}

.r-story-card:nth-child(4n+2) {
  background: rgba(56, 189, 248, 0.08);
  border-left-color: var(--accent-2);
}

.r-story-card:nth-child(4n+3) {
  background: rgba(236, 73, 153, 0.06);
  border-left-color: var(--accent-4);
}

.r-story-card:nth-child(4n+4) {
  background: rgba(255, 217, 160, 0.22);
  border-left-color: var(--accent-3);
}

.r-story-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  flex: none;
}

.r-story-card:nth-child(4n+1) .r-story-num {
  color: var(--accent);
}

.r-story-card:nth-child(4n+2) .r-story-num {
  color: var(--accent-2);
}

.r-story-card:nth-child(4n+3) .r-story-num {
  color: var(--accent-4);
}

.r-story-card:nth-child(4n+4) .r-story-num {
  color: #b9852a;
}

.r-story-card p {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ===================================================================
   CANVAS SEQUENCE — PERSPECTIVE
   =================================================================== */
.r-flow {
  min-height: 120vh;
  display: flex;
  align-items: center;
  background: var(--bg-1);
  overflow: hidden;
}

.r-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

.r-flow-inner {
  position: relative;
  z-index: 1;
  padding: 100px var(--gutter);
}

.r-flow-title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  max-width: 640px;
}

.r-flow-points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-width: 720px;
}

.r-flow-points li {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0.3;
  transform: translateX(-24px);
  transition: opacity .2s, transform .2s;
}

.r-flow-points li:first-child {
  border-top: 1px solid var(--line);
}

.r-flow-points li.is-lit {
  opacity: 1;
  transform: translateX(0);
}

.r-flow-point-index {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  flex: none;
}

.r-flow-point-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.3;
  color: var(--ink);
}

.r-flow-note {
  margin-top: 32px;
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-70);
}

.r-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 56px 0 0;
  max-width: 1100px;
}

.r-flow-card {
  --card-accent: #6C4CFF;
  padding: 40px 32px;
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 2px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(20, 18, 31, 0.04);
  transition: all .35s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.r-flow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-accent);
  transition: height .35s var(--ease-out);
}

.r-flow-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(20, 18, 31, 0.08);
  border-color: var(--card-accent);
}

.r-flow-card:hover::before {
  height: 6px;
}

.r-flow-card-icon {
  font-size: 2.8rem;
  margin-bottom: 16px;
  display: block;
  transition: transform .35s var(--ease-out);
}

.r-flow-card:hover .r-flow-card-icon {
  transform: scale(1.15);
}

.r-flow-card-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--card-accent);
  margin-bottom: 8px;
  line-height: 1;
  display: inline-block;
  opacity: 0.9;
}

.r-flow-card h3 {
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 12px;
  font-weight: 600;
}

.r-flow-card p {
  font-size: 0.95rem;
  color: var(--ink-70);
  line-height: 1.65;
  margin: 0;
}

/* ===================================================================
   3D INTERACTION — CONVERGE
   Deliberately dark, like the live site's footer / final CTA — the one
   contrast moment on an otherwise light page, and what makes the
   wireframe + starfield actually read. Also the fallback background if
   WebGL never loads, so the white title stays legible either way.
   =================================================================== */
.r-converge {
  background: var(--dark-bg);
  padding: 120px 0;
  overflow: hidden;
}

.r-converge-pin {
  height: 100vh;
  display: flex;
  align-items: center;
}

/* text on left, cards on right — column tracks sized to content (not
   1fr) and space-between'd across the normal .r-container width, so
   the cards sit near the text instead of stranded mid-viewport with a
   dead gap beyond them. */
.r-converge-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 600px);
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}

.r-converge-text {
  grid-column: 1;
}

/* right-side orbit — fills the space the old scroll-pinned WebGL sphere
   used to occupy, but self-contained (pure CSS) so it doesn't depend on
   the pin/scrub timeline that used to drive it. Nodes carry the same
   four hues as the discipline cards, orbiting a glowing core to read as
   "expertise converging" without needing scroll math. */
.r-converge-orbit {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 6%;
  width: min(38vw, 460px);
  height: min(38vw, 460px);
  transform: translateY(-50%);
  pointer-events: none;
}

.r-converge-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(143, 115, 255, 0.9), rgba(108, 76, 255, 0.15) 70%);
  box-shadow: 0 0 60px rgba(108, 76, 255, 0.55);
  animation: convergeCorePulse 4s ease-in-out infinite;
}

@keyframes convergeCorePulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
}

.r-converge-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed var(--dark-line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: convergeSpin linear infinite;
}

.r-converge-orbit-ring-1 {
  width: 42%;
  height: 42%;
  animation-duration: 14s;
}

.r-converge-orbit-ring-2 {
  width: 62%;
  height: 62%;
  animation-duration: 20s;
  animation-direction: reverse;
}

.r-converge-orbit-ring-3 {
  width: 82%;
  height: 82%;
  animation-duration: 26s;
}

.r-converge-orbit-ring-4 {
  width: 100%;
  height: 100%;
  animation-duration: 32s;
  animation-direction: reverse;
}

@keyframes convergeSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* node is anchored to the ring's top edge, so it inherits the ring's
   rotation as it orbits — counter-spinning it at the same speed in the
   opposite direction cancels that inherited spin so the pill/label stay
   upright the whole way round, while the orbit motion itself is untouched. */
.r-converge-orbit-node {
  position: absolute;
  top: -13px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: rgba(20, 18, 31, 0.8);
  border: 1px solid hsl(var(--node-hue) 80% 62% / .5);
  box-shadow: 0 0 18px hsl(var(--node-hue) 90% 65% / .5);
  white-space: nowrap;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.r-converge-orbit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: hsl(var(--node-hue) 90% 68%);
  box-shadow: 0 0 10px hsl(var(--node-hue) 90% 65% / .9);
}

.r-converge-orbit-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}

@keyframes convergeCounterCW {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes convergeCounterCCW {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(-360deg);
  }
}

.r-converge-orbit-ring-1 .r-converge-orbit-node {
  animation-name: convergeCounterCCW;
  animation-duration: 14s;
}

.r-converge-orbit-ring-2 .r-converge-orbit-node {
  animation-name: convergeCounterCW;
  animation-duration: 20s;
}

.r-converge-orbit-ring-3 .r-converge-orbit-node {
  animation-name: convergeCounterCCW;
  animation-duration: 26s;
}

.r-converge-orbit-ring-4 .r-converge-orbit-node {
  animation-name: convergeCounterCW;
  animation-duration: 32s;
}

@media (max-width: 1180px) {
  .r-converge-orbit {
    right: -4%;
    opacity: 0.7;
  }
}

@media (max-width: 900px) {
  .r-converge-orbit {
    display: none;
  }
}

/* Deliberately smaller than --fs-h2: at the hero's fluid heading size,
   a word like "connected" is wider than this column and pushes text
   past where the webgl clip-path assumes it ends, back under the sphere. */
.r-converge-title {
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  margin-top: 18px;
  color: #fff;
}

.r-converge-copy {
  margin-top: 20px;
  font-size: 1.05rem;
  color: var(--dark-ink-70);
  max-width: 460px;
}

/* ambient backdrop glow — echoes the hero's orb language, reads as the
   "energy" the four disciplines are converging out of */
.r-converge-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.r-converge-ambient::before,
.r-converge-ambient::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: convergeDrift 16s ease-in-out infinite;
}

.r-converge-ambient::before {
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  top: -12%;
  left: 4%;
  background: radial-gradient(circle, rgba(108, 76, 255, 0.32), transparent 70%);
}

.r-converge-ambient::after {
  width: 34vw;
  height: 34vw;
  max-width: 420px;
  max-height: 420px;
  bottom: -14%;
  right: 8%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 70%);
  animation-delay: -8s;
}

@keyframes convergeDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(4%, -6%) scale(1.08);
  }
}

.r-converge-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 18px;
  margin-top: 0;
  max-width: 560px;
}

.r-converge-card {
  --card-hue: 255;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 22px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--dark-line);
  backdrop-filter: blur(20px);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out), background .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.r-converge-card:nth-child(2) {
  --card-hue: 199;
}

.r-converge-card:nth-child(3) {
  --card-hue: 330;
}

.r-converge-card:nth-child(4) {
  --card-hue: 38;
}

/* animated gradient ring, revealed on hover via mask-composite so only
   the 1px edge shows rather than a filled box */
.r-converge-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, hsl(var(--card-hue) 90% 68%), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}

.r-converge-card-glow {
  position: absolute;
  top: -35%;
  right: -25%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--card-hue) 85% 62% / .4), transparent 70%);
  filter: blur(22px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}

.r-converge-card:hover,
.r-converge-card.is-active {
  transform: translateY(-6px);
  border-color: hsl(var(--card-hue) 80% 65% / .45);
  background: linear-gradient(160deg, hsl(var(--card-hue) 70% 30% / .22), rgba(255, 255, 255, 0.015));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.r-converge-card:hover::before,
.r-converge-card.is-active::before {
  opacity: 1;
}

.r-converge-card:hover .r-converge-card-glow,
.r-converge-card.is-active .r-converge-card-glow {
  opacity: 1;
  transform: scale(1);
}

.r-converge-card-icon {
  width: 50px;
  height: 50px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: hsl(var(--card-hue) 80% 60% / .16);
  color: hsl(var(--card-hue) 85% 72%);
  transition: transform .4s var(--ease-out), background .4s var(--ease-out);
}

.r-converge-card-icon svg {
  width: 24px;
  height: 24px;
}

.r-converge-card:hover .r-converge-card-icon,
.r-converge-card.is-active .r-converge-card-icon {
  transform: scale(1.1) rotate(-6deg);
  background: hsl(var(--card-hue) 80% 60% / .3);
}

.r-converge-card-label {
  position: relative;
  z-index: 1;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ===================================================================
   HORIZONTAL GALLERY
   =================================================================== */
.r-gallery {
  background: var(--bg);
}

.r-gallery-pin {
  display: flex;
  flex-direction: column;
  padding-top : 100px ;
}

.r-gallery-head {
  flex: none;
}

.r-gallery-head h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin-top: 12px;
}

/* native horizontal scroll/swipe strip — replaces the old vertical-scroll-
   jacked pin. scroll-snap keeps cards landing cleanly instead of stopping
   mid-card; the right-edge fade hints there's more to scroll to, since
   without a pin nothing else on screen signals "this row scrolls sideways". */
.r-gallery-track-wrap {
  position: relative;
  margin-top: 16px;
}

.r-gallery-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 20px;
  gap: 28px;
  align-items: stretch;
  padding: 4px var(--gutter) 20px;
}

.r-gallery-card {
  width: auto;
  height: 440px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  /* box-shadow: var(--shadow-md); */
  /* auto (not a fraction) on the copy row so it always sizes to its own
     content — a fixed fraction of a capped card height could squeeze the
     heading/paragraph/tags/link shorter than they need and get clipped
     by overflow:hidden below. The image simply fills whatever is left. */
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  position: relative;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
}

.r-gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(20, 18, 31, 0.14);
  border-color: var(--line-2);
}

.r-gallery-media {
  position: relative;
  overflow: hidden;
}

.r-gallery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.16);
  transition: transform .7s var(--ease-out);
}

.r-gallery-card:hover .r-gallery-media img {
  transform: scale(1.02);
}

.r-gallery-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 5, 10, 0.7));
}

.r-gallery-copy {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}

.r-gallery-num {
  font-size: 0.72rem;
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.r-gallery-copy h3 {
  font-size: 1.2rem;
}

.r-gallery-copy p {
  font-size: 0.84rem;
  color: var(--ink-70);
  line-height: 1.5;
}

.r-tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.r-tag-row span {
  font-size: 0.66rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--ink-70);
}

.r-gallery-link {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.84rem;
  padding-top: 6px;
  color: var(--ink);
}

.r-gallery-card-cta {
  background: var(--grad-final);
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: start;
}

.r-gallery-card-cta .r-gallery-copy {
  justify-content: center;
}

.r-gallery-card-cta h3 {
  color: #fff;
  font-size: 1.6rem;
}

.r-gallery-card-cta p {
  color: rgba(255, 255, 255, 0.85);
}

.r-gallery-card-cta .r-gallery-num {
  color: rgba(255, 255, 255, 0.75);
}

.r-gallery-card-cta .r-btn {
  margin-top: 8px;
}

@media (max-width: 860px) {
  .r-gallery-track {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================================================
   SERVICES STEPPER
   =================================================================== */
.r-stepper {
  padding: 150px 0;
  background: var(--bg-1);
}

.r-stepper-head h2 {
  font-size: var(--fs-h2);
  margin-top: 16px;
}

.r-stepper-list {
  margin-top: 70px;
  border-top: 1px solid var(--line);
}

.r-stepper-row {
  display: grid;
  grid-template-columns: 100px 1fr 1.4fr;
  gap: 32px;
  align-items: center;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
}

/* Entrance is a colour reveal, not a fade: index + heading sit dim until
   scrolled into view, then the index snaps to accent and the heading to
   full ink — .is-revealed is added once via ScrollTrigger and never
   removed. Hover / centre-focus then goes one step further to accent,
   declared after .is-revealed so it wins whenever both are present. */
.r-stepper-index {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  color: var(--ink-30);
  transition: color .5s var(--ease-out);
}

.r-stepper-row.is-revealed .r-stepper-index {
  color: var(--accent);
}

.r-stepper-row h3 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  color: var(--ink-30);
  transition: color .5s var(--ease-out), transform .4s;
}

.r-stepper-row.is-revealed h3 {
  color: var(--ink);
}

.r-stepper-row p {
  font-size: 0.98rem;
  color: var(--ink-70);
  max-width: 440px;
  line-height: 1.55;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}

.r-stepper-row.is-revealed p {
  opacity: 1;
}

.r-stepper-row:hover h3,
.r-stepper-row.is-focus h3 {
  color: var(--accent);
  transform: translateX(10px);
}

/* ===================================================================
   LARGE TYPOGRAPHY — INDUSTRIES
   =================================================================== */
.r-industries {
  padding: 150px 0;
  background: var(--bg);
}

.r-industries-head h2 {
  font-size: var(--fs-h2);
  margin-top: 16px;
}

.r-industries-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.r-card {
  --hue: 260;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  height: 118px;
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}

.r-card::before {
  content: '';
  position: absolute;
  top: -22px;
  right: -22px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--hue) 80% 60% / 0.16), transparent 70%);
  transition: transform .4s var(--ease-out), opacity .4s;
}

.r-card:hover::before {
  transform: scale(1.25);
  opacity: 1;
}

.r-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: hsl(var(--hue) 75% 58% / 0.12);
  color: hsl(var(--hue) 65% 45%);
  transition: transform .4s var(--ease-out), background .3s;
}

.r-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.r-card:hover .r-card-icon {
  transform: scale(1.08) rotate(-6deg);
  background: hsl(var(--hue) 75% 58% / 0.2);
}

.r-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r-card-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 1.1rem;
  color: var(--ink-30);
  transform: rotate(-45deg);
  transition: transform .3s var(--ease-out), color .3s;
}

.r-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: hsl(var(--hue) 55% 72%);
}

.r-card:hover .r-card-arrow {
  color: var(--accent);
  transform: rotate(0deg);
}

/* ===================================================================
   TESTIMONIALS
   =================================================================== */
.r-testimonials {
  padding: 150px 0;
  background: var(--bg-1);
}

.r-testimonials-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.r-testimonial-stage {
  position: relative;
  max-width: 840px;
  margin-top: 50px;
  min-height: 220px;
  width: 100%;
}

.r-testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.r-testimonial.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

.r-testimonial p {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.4;
}

.r-testimonial span {
  font-size: 0.85rem;
  color: var(--ink-50);
  letter-spacing: 0.02em;
}

.r-testimonial-dots {
  display: flex;
  gap: 10px;
  margin-top: 40px;
}

.r-testimonial-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background .3s, transform .3s;
}

.r-testimonial-dots button.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* ===================================================================
   FINAL CTA — inset gradient card, same treatment as the live site's
   .p-final (margin:0 24px, radius 32px, radial highlight overlay).
   =================================================================== */
.r-cta-tight {
  padding: 110px 0;
}

.r-cta-final {
  position: relative;
  overflow: hidden;
  background: var(--grad-final);
  border-radius: 32px;
  margin: 0 24px;
  padding: 90px 60px;
  text-align: center;
}

.r-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12) 0, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0, transparent 40%);
}

.r-cta-final-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.r-cta-title {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  color: #fff;
}

.r-cta-title em {
  color: rgba(255, 255, 255, 0.78);
}

.r-cta-final-inner p {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.6;
}

.r-cta-final-inner .r-btn {
  margin-top: 30px;
}

.r-btn-white {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
}

.r-btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

@media (max-width: 640px) {
  .r-cta-final {
    margin: 0 12px;
    padding: 60px 28px;
    border-radius: 24px;
  }
}

/* ===================================================================
   FOOTER — dark ink bg + white text, same as the live site's .p-footer
   =================================================================== */
/* mirrors .p-footer (product.css + animations.css) exactly, so the
   footer reads identically whether it's this page's r-footer markup
   or another page's p-footer markup. */
.r-footer {
  position: relative;
  background: linear-gradient(180deg, #0C0A14 0%, #14121F 100%);
  color: #fff;
  padding: 80px 0 30px;
}

.r-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
  opacity: 0.5;
}

.r-footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 30px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--dark-line);
}

.r-footer-brand img {
  height: 30px;
  filter: brightness(0) invert(1);
  margin-bottom: 16px;
}

.r-footer-brand p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 280px;
  line-height: 1.6;
}

.r-footer-col h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
  font-family: 'Inter';
  font-weight: 600;
}

.r-footer-col a {
  position: relative;
  display: block;
  width: fit-content;
  font-size: 0.92rem;
  color: #fff;
  opacity: 0.92;
  margin-bottom: 11px;
  transition: opacity .2s;
}

.r-footer-col a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-light);
  transition: width .3s var(--ease-out);
}

.r-footer-col a:hover {
  opacity: 1;
}

.r-footer-col a:hover::after {
  width: 100%;
}

.r-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.9);
  flex-wrap: wrap;
  gap: 10px;
}

/* ===================================================================
   CONTACT MODAL
   =================================================================== */
.r-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.r-contact-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.r-contact-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 31, 0.6);
  backdrop-filter: blur(4px);
}

.r-contact-box {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(20, 18, 31, 0.15);
  animation: slideUp 0.4s var(--ease-out);
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.r-contact-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 2;
}

.r-contact-close:hover {
  border-color: var(--line-2);
  background: var(--bg);
  transform: rotate(90deg);
}

.r-contact-close svg {
  width: 14px;
  height: 14px;
  stroke: var(--ink);
}

.r-contact-box h2 {
  font-size: 1.4rem;
  margin-bottom: 4px;
  font-weight: 600;
}

.r-contact-box > p {
  color: var(--ink-70);
  font-size: 0.85rem;
  margin-bottom: 16px;
  line-height: 1.4;
}

.r-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r-form-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}

.r-form-group input,
.r-form-group textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  transition: all 0.3s;
}

.r-form-group input:focus,
.r-form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(108, 76, 255, 0.1);
}

.r-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.r-contact-form .r-btn {
  margin-top: 4px;
  width: 100%;
  font-size: 0.9rem;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .r-nav-links {
    display: none;
  }

  .r-nav-cta {
    display: none;
  }

  .r-nav-burger {
    display: flex;
  }

  .r-story-grid {
    grid-template-columns: 1fr;
  }

  .r-stepper-row {
    grid-template-columns: 60px 1fr;
  }

  .r-stepper-row p {
    grid-column: 2 / 3;
    max-width: none;
  }

  .r-footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .r-footer-brand {
    grid-column: 1 / -1;
  }

  .r-converge {
    padding: 100px 0;
  }

  .r-converge-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .r-converge-text,
  .r-converge-grid {
    grid-column: 1;
  }

  .r-converge-grid {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .r-hero {
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .r-hero-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .r-hero-actions {
    width: 100%;
  }

  .r-btn {
    flex: 1;
  }

  .r-gallery-track {
    grid-template-columns: 1fr;
  }

  .r-gallery-card {
    width: auto;
    height: auto;
    grid-template-rows: 180px auto;
  }

  .r-footer-top {
    grid-template-columns: 1fr;
  }

  .r-name {
    font-size: clamp(1.6rem, 9vw, 2.6rem);
  }

  .r-converge-grid {
    grid-template-columns: 1fr;
  }
}