/* ==========================================================================
   Rea Consulting — theme.css
   Design system: tokens, base, layout primitives, components, sections.
   Headlines: Geist. Body: Rethink Sans. Brand: navy #2D3565.
   ========================================================================== */

/* ─── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --rc-navy:        #2D3565;
  --rc-navy-2:      #4A5A8A;
  --rc-navy-3:      #6B7A9F;
  --rc-navy-soft:   #8C95B0;
  --rc-navy-faint:  #B5BBCC;

  --rc-bg:          #FAFAF8;
  --rc-bg-2:        #F4F6FB;
  --rc-bg-3:        #F1F5F9;
  --rc-tint-1:      #F0F4FF;
  --rc-tint-2:      #EEF2F8;
  --rc-surface:     #FFFFFF;

  --rc-ink:         #2D3565;
  --rc-ink-2:       #4A5A8A;
  --rc-ink-3:       #6B7A9F;
  --rc-ink-4:       #8C95B0;
  --rc-ink-body:    #4B5563;
  --rc-ink-muted:   #6B7280;

  --rc-line:        rgba(45, 53, 101, 0.10);
  --rc-line-soft:   rgba(45, 53, 101, 0.06);
  --rc-line-strong: rgba(45, 53, 101, 0.16);

  /* Typography */
  --rc-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --rc-body:    'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Geometry */
  --rc-radius-sm: 6px;
  --rc-radius-md: 12px;
  --rc-radius-lg: 16px;
  --rc-radius-xl: 20px;
  --rc-radius-pill: 999px;

  /* Layout */
  --rc-container: 1200px;
  --rc-container-narrow: 920px;
  --rc-pad-x: clamp(20px, 4vw, 40px);

  /* Motion */
  --rc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rc-dur-fast: 0.18s;
  --rc-dur: 0.28s;
  --rc-dur-slow: 0.55s;

  --rc-header-h: 72px;
}

/* ─── Base reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--rc-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--rc-ink);
  background: var(--rc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rc-display);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--rc-navy);
  line-height: 1.15;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--rc-dur-fast) var(--rc-ease); }
img, svg { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(45, 53, 101, 0.18); color: var(--rc-navy); }

/* ─── Layout primitives ───────────────────────────────────────────────── */
.container {
  max-width: var(--rc-container);
  margin: 0 auto;
  padding-left: var(--rc-pad-x);
  padding-right: var(--rc-pad-x);
}
.container-narrow { max-width: var(--rc-container-narrow); margin: 0 auto; padding-left: var(--rc-pad-x); padding-right: var(--rc-pad-x); }

/* Tailwind-style helpers kept because legacy markup uses them */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; } .gap-14 { gap: 3.5rem; } .gap-16 { gap: 4rem; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mt-10 { margin-top: 2.5rem; }
.pt-8 { padding-top: 2rem; }
.pb-14 { padding-bottom: 3.5rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.max-w-2xl { max-width: 42rem; }
.inset-0 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.absolute { position: absolute; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0; }
.text-right { text-align: right; }
.gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; } .gap-16 { gap: 4rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }

.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.mb-12 { margin-bottom: 3rem; }
.z-10 { position: relative; z-index: 10; }
.hidden { display: none; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:items-end { align-items: flex-end; }
  .md\:items-start { align-items: flex-start; }
  .md\:items-center { align-items: center; }
  .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .md\:py-36 { padding-top: 9rem; padding-bottom: 9rem; }
  .md\:gap-8 { gap: 2rem; }
  .md\:gap-10 { gap: 2.5rem; }
  .md\:gap-14 { gap: 3.5rem; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:justify-between { justify-content: space-between; }
  .md\:pt-12 { padding-top: 3rem; }
  .md\:mb-14 { margin-bottom: 3.5rem; }
  .md\:block { display: block; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:gap-14 { gap: 3.5rem; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:block { display: block; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:block { display: block; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Typography components ───────────────────────────────────────────── */
.display-headline {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--rc-navy);
}

/* Helper text — replaces the old eyebrow treatment. Reads as quiet
   supporting copy: no uppercase, no tracking, no leading bar.
   The text content is rendered exactly as written in translations.php. */
.section-label {
  display: inline-block;
  font-family: var(--rc-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rc-navy-3);
  line-height: 1.5;
}
.section-label--on-dark { color: rgba(255, 255, 255, 0.62); }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary,
.btn-outline,
.btn-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rc-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 0.85rem 1.5rem;
  border-radius: var(--rc-radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--rc-dur) var(--rc-ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--rc-navy); color: #fff; }
.btn-primary:hover { background: var(--rc-navy-2); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(45, 53, 101, 0.22); color: #fff; }

.btn-outline { background: rgba(255, 255, 255, 0.6); color: var(--rc-navy); border-color: var(--rc-line-strong); backdrop-filter: blur(8px); }
.btn-outline:hover { background: #fff; border-color: var(--rc-navy-3); transform: translateY(-1px); }

.btn-light { background: #fff; color: var(--rc-navy); }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); color: var(--rc-navy); }

.btn-primary svg, .btn-outline svg, .btn-light svg { transition: transform var(--rc-dur) var(--rc-ease); }
.btn-primary:hover svg, .btn-outline:hover svg, .btn-light:hover svg { transform: translateX(3px); }

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--rc-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rc-navy);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: gap var(--rc-dur) var(--rc-ease), color var(--rc-dur) var(--rc-ease);
}
.link-cta:hover { gap: 0.65rem; color: var(--rc-navy-2); }

/* ─── Site header ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rc-line-soft);
  transition: background var(--rc-dur) var(--rc-ease), border-color var(--rc-dur) var(--rc-ease), box-shadow var(--rc-dur) var(--rc-ease);
}
.site-header.is-scrolled {
  background: rgba(250, 250, 248, 0.96);
  border-bottom-color: var(--rc-line);
  box-shadow: 0 4px 18px rgba(45, 53, 101, 0.06);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 88px;
  flex-wrap: nowrap;
  transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.is-scrolled .nav-row { height: 72px; }
@media (max-width: 480px) {
  .nav-row { height: 68px; }
  .site-header.is-scrolled .nav-row { height: 58px; }
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--rc-navy);
}
.brand-mark img,
.brand-mark .brand-logo,
.brand-mark .custom-logo,
.brand-mark .custom-logo-link img {
  display: block;
  height: 58px;
  width: auto;
  transform-origin: left center;
  /* Animate scale instead of height — GPU-accelerated, no layout reflow,
     no flicker at the scroll threshold. The intrinsic height stays
     constant; only the visual size changes. */
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
@media (max-width: 767px) {
  .brand-mark img,
  .brand-mark .brand-logo,
  .brand-mark .custom-logo,
  .brand-mark .custom-logo-link img { height: 52px; }
}
@media (max-width: 480px) {
  .brand-mark img,
  .brand-mark .brand-logo,
  .brand-mark .custom-logo,
  .brand-mark .custom-logo-link img { height: 44px; }
}
/* Scrolled state — scale to roughly 80% which matches the old 46/58 ratio. */
.site-header.is-scrolled .brand-mark img,
.site-header.is-scrolled .brand-mark .brand-logo,
.site-header.is-scrolled .brand-mark .custom-logo,
.site-header.is-scrolled .brand-mark .custom-logo-link img {
  transform: scale(0.79);
}

/* ─── Language toggle pill ────────────────────────────────────────────── */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rc-line-strong);
  border-radius: var(--rc-radius-pill);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--rc-dur) var(--rc-ease), background var(--rc-dur) var(--rc-ease);
}
.lang-toggle:hover { border-color: var(--rc-navy-3); }
.lang-toggle a,
.lang-toggle button {
  font-family: var(--rc-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  background: transparent;
  color: var(--rc-navy);
  border: none;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  transition: background var(--rc-dur-fast) var(--rc-ease), color var(--rc-dur-fast) var(--rc-ease);
}
.lang-toggle a:hover:not(.is-current),
.lang-toggle button:hover:not(.is-current) {
  background: rgba(45, 53, 101, 0.06);
}
.lang-toggle a.is-current,
.lang-toggle button.is-current {
  background: var(--rc-navy);
  color: #fff;
}
.lang-toggle a + a,
.lang-toggle button + button {
  border-left: 1px solid var(--rc-line);
}
/* On scrolled / opaque header, lose the translucent fill so it reads cleanly on white */
.site-header.is-scrolled .lang-toggle { background: transparent; }
.brand-tagline {
  display: none;
  font-family: var(--rc-body);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--rc-navy-3);
  text-transform: uppercase;
  font-weight: 500;
  padding-left: 0.85rem;
  border-left: 1px solid var(--rc-line);
  line-height: 1.35;
  /* Allow wrapping to 2 lines instead of truncating. */
  max-width: 22ch;
  white-space: normal;
}
/* Show tagline at a reachable breakpoint — Croatian is long but two-line
   wrap means we no longer need 1400px+ to fit it. */
@media (min-width: 1180px) { .brand-tagline { display: inline-block; } }

.primary-nav { display: none; align-items: center; gap: 1.5rem; flex-wrap: nowrap; }
@media (min-width: 1024px) { .primary-nav { display: flex; } }

.nav-link {
  font-family: var(--rc-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--rc-ink-3);
  text-decoration: none;
  letter-spacing: -0.003em;
  position: relative;
  padding: 0.25rem 0;
  white-space: nowrap;
}
.nav-link:hover { color: var(--rc-navy); }
.nav-link.is-active { color: var(--rc-navy); font-weight: 600; }
.nav-link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1.5px; background: var(--rc-navy); border-radius: 1px;
}
/* At intermediate widths (1024-1280px) tighten everything so the longer
   Croatian labels still fit on one line. */
@media (max-width: 1280px) {
  .nav-row { gap: 1rem; }
  .primary-nav { gap: 1.15rem; }
  .nav-link { font-size: 0.8rem; }
  .contact-cta-btn { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
}

.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--rc-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-navy);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--rc-dur) var(--rc-ease);
}
.contact-cta-btn:hover { background: var(--rc-navy-2); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(45, 53, 101, 0.22); }

.mobile-toggle { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }
.hamburger {
  background: transparent;
  border: 1px solid var(--rc-line-strong);
  border-radius: 8px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rc-navy);
  cursor: pointer;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 80%;
  max-width: 360px;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-md);
  background: rgba(250, 250, 248, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(45, 53, 101, 0.18);
  margin-top: 0.5rem;
  margin-right: 1rem;
  overflow: hidden;
  z-index: 110;
}
.mobile-menu.is-open { display: block; }
.mm-inner { display: flex; flex-direction: column; padding: 1rem 1.25rem 1.25rem; }
.mm-inner a {
  font-family: var(--rc-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--rc-navy);
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rc-line-soft);
}
.mm-inner a.contact {
  margin-top: 1rem;
  padding: 0.85rem 1.5rem;
  background: var(--rc-navy);
  color: #fff;
  border-radius: var(--rc-radius-pill);
  text-align: center;
  border-bottom: none;
  align-self: flex-start;
}

.rc-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--rc-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rc-navy-3);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-pill);
}
.rc-lang a { color: var(--rc-navy-3); text-decoration: none; padding: 0 0.25rem; }
.rc-lang a.is-active,
.rc-lang span.is-active { color: var(--rc-navy); font-weight: 700; }

.rc-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--rc-navy);
  z-index: 200;
  transition: width 0.1s linear;
}

/* ─── Hero (homepage) ─────────────────────────────────────────────────── */
.rc-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--rc-bg) 0%, var(--rc-tint-1) 60%, var(--rc-tint-2) 100%);
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 96px);
}
.rc-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--rc-navy); z-index: 1;
}

.rc-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .rc-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
}

.rc-hero-label {
  display: inline-block;
  font-family: var(--rc-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rc-navy-3);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
/* Leading bar removed — kept as a no-op so older markup doesn't break. */
.rc-hero-label::before { content: none; }

/* THE three-tone headline — the signature moment */
.rc-hero-title {
  font-family: var(--rc-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.75rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}
.rc-hero-title .line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity 0.9s var(--rc-ease-out),
    transform 0.9s var(--rc-ease-out),
    filter 0.9s var(--rc-ease-out);
}
.rc-hero-title .line.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.rc-hero-title .line-1 { color: var(--rc-navy-3); transition-delay: 0.05s; }
.rc-hero-title .line-2 { color: var(--rc-navy-2); transition-delay: 0.22s; }
.rc-hero-title .line-3 { color: var(--rc-navy);   transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .rc-hero-title .line { opacity: 1; transform: none; filter: none; transition: none; }
}

.rc-hero-claim {
  font-family: var(--rc-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--rc-navy);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 1rem;
  max-width: 540px;
}
.rc-hero-support {
  font-family: var(--rc-body);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.7;
  color: var(--rc-ink-muted);
  max-width: 540px;
  margin-bottom: 2rem;
}
.rc-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.rc-map-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-md);
  padding: 1.75rem;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(45, 53, 101, 0.08);
}
.rc-map-heading {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rc-navy);
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0 0 1.25rem;
}

/* ─── Adria map wrapper (the snap-to-Croatia behavior is defined later) ── */
.adria-map-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; }
.adria-map-wrap svg { width: 100%; height: auto; max-height: 320px; overflow: visible; }

/* ─── Navy banner + CTA band ──────────────────────────────────────────── */
.rc-navy-banner,
.navy-banner,
.rc-cta-band {
  background: var(--rc-navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.rc-navy-banner::before,
.navy-banner::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.rc-navy-banner > *,
.navy-banner > *,
.navy-banner .nb-content,
.rc-cta-band > * { position: relative; z-index: 1; }

/* The helper injects an .nb-deco SVG flourish — keep it subtle */
.navy-banner .nb-deco {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.navy-banner.fade-top { mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.navy-banner.fade-bottom { mask-image: linear-gradient(to top, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 8%, #000 92%, transparent 100%); }

.rc-cta-band::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

[data-rc-counter] {
  font-family: var(--rc-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ─── Services strip ──────────────────────────────────────────────────── */
.rc-services-strip {
  background: var(--rc-bg-2);
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
}
.rc-services-strip a { font-family: var(--rc-body); text-decoration: none; transition: opacity var(--rc-dur) var(--rc-ease); }
.rc-services-strip a:hover { opacity: 0.7; }

/* ─── Cards ───────────────────────────────────────────────────────────── */
.card-hover {
  transition: transform var(--rc-dur) var(--rc-ease), box-shadow var(--rc-dur) var(--rc-ease), border-color var(--rc-dur) var(--rc-ease);
  border-radius: var(--rc-radius-md);
}
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(45, 53, 101, 0.10); }

/* Logo strip */
.rc-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: var(--rc-bg-2);
  border-radius: var(--rc-radius-sm);
  font-family: var(--rc-body);
  font-size: 0.7rem;
  color: var(--rc-ink-4);
  font-weight: 500;
  transition: background var(--rc-dur) var(--rc-ease);
}
.rc-logo-cell:hover { background: var(--rc-tint-1); }

/* Testimonial */
.rc-testimonial { max-width: 56rem; margin: 0 auto; position: relative; }
.rc-testimonial-mark {
  font-family: var(--rc-display);
  font-size: clamp(6rem, 12vw, 10rem);
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  position: absolute;
  top: -1.5rem; left: -1rem;
  font-weight: 800;
  user-select: none;
  pointer-events: none;
}
.rc-testimonial-quote {
  font-family: var(--rc-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.rc-testimonial-bar { width: 48px; height: 2px; background: rgba(255, 255, 255, 0.4); margin-bottom: 1.75rem; }
.rc-testimonial-author { display: flex; align-items: center; gap: 1rem; }
.rc-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08));
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.rc-testimonial-name { font-family: var(--rc-display); font-weight: 700; font-size: 0.95rem; color: #fff; }
.rc-testimonial-title { font-family: var(--rc-body); font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }

/* Service card */
.rc-service-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-md);
  padding: 2rem 1.75rem;
  text-decoration: none;
  height: 100%;
  transition: all var(--rc-dur) var(--rc-ease);
  position: relative;
  overflow: hidden;
}
.rc-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rc-navy);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform var(--rc-dur-slow) var(--rc-ease-out);
}
.rc-service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(45, 53, 101, 0.10); }
.rc-service-card:hover::before { transform: scaleX(1); }

.rc-service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--rc-radius-md);
  background: var(--rc-tint-1);
  color: var(--rc-navy);
}
.rc-service-card h3 {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--rc-navy);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.rc-service-card p {
  font-family: var(--rc-body);
  font-size: 0.9rem;
  color: var(--rc-ink-muted);
  line-height: 1.7;
  flex: 1;
}

/* Pillars */
.rc-pillar {
  background: var(--rc-bg-2);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-md);
  padding: 2rem;
  transition: all var(--rc-dur) var(--rc-ease);
}
.rc-pillar:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(45, 53, 101, 0.10); }
.rc-pillar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--rc-radius-md);
  background: #fff;
  color: var(--rc-navy);
  margin-bottom: 1.25rem;
  border: 1px solid var(--rc-line);
}
.rc-pillar h3 { font-family: var(--rc-display); font-weight: 700; font-size: 1.125rem; color: var(--rc-navy); margin-bottom: 0.75rem; letter-spacing: -0.015em; }
.rc-pillar p { font-family: var(--rc-body); font-size: 0.95rem; color: var(--rc-ink-body); line-height: 1.75; }

/* Markets card (lower on home) */
.rc-markets-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-md);
  padding: 1.75rem;
  box-shadow: 0 8px 32px rgba(45, 53, 101, 0.08);
}

/* Network strip */
.rc-network-strip {
  background: linear-gradient(180deg, var(--rc-bg) 0%, var(--rc-bg-2) 100%);
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
}

/* Pull quote */
.rc-pullquote-section { background: #fff; border-top: 1px solid var(--rc-line); }
.rc-pullquote {
  font-family: var(--rc-display);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-style: italic;
  font-weight: 500;
  color: var(--rc-navy);
  line-height: 1.55;
  letter-spacing: -0.015em;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.rc-pullquote-author {
  margin-top: 1.5rem;
  font-family: var(--rc-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rc-navy-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

/* ─── Footer (light, mockup style) ────────────────────────────────────── */
.site-footer {
  background: transparent;
  color: var(--rc-ink-body);
  padding: clamp(56px, 7vw, 88px) 0 1.5rem;
  font-family: var(--rc-body);
  font-size: 0.92rem;
  border-top: 1px solid var(--rc-line-soft);
  position: relative;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.footer-brand img.footer-logo {
  height: 36px;
  width: auto;
  filter: none;
  opacity: 1;
}
.footer-brand-link { display: inline-block; text-decoration: none; }
.ic-menu, .ic-x { display: inline-flex; }
.site-main { display: block; min-height: 60vh; }
.site-footer .section-label { color: var(--rc-ink-4); }
.site-footer .descr {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--rc-ink-body);
  max-width: 340px;
  margin-bottom: 1.5rem;
}
.site-footer nav { display: flex; flex-direction: column; gap: 0.7rem; }
.site-footer nav a {
  color: var(--rc-navy);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.site-footer nav a:hover { color: var(--rc-navy-2); }
.contact-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--rc-ink-body);
  text-decoration: none;
}
.contact-row:hover { color: var(--rc-navy); }
.contact-row .ti,
.contact-row svg {
  color: var(--rc-navy-3);
}
.legal-row {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rc-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--rc-ink-4);
}
.legal-row a { color: var(--rc-ink-muted); text-decoration: none; }
.legal-row a:hover { color: var(--rc-navy); }
.footer-credit { font-size: 0.75rem; }
.foot-network,
.site-footer .footer-brand .descr + div { color: var(--rc-ink-muted); font-size: 0.82rem; }

/* ─── Watermark hook + Back to top ────────────────────────────────────── */
.rea-watermark { position: relative; }

.rc-back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--rc-navy);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all var(--rc-dur) var(--rc-ease);
  z-index: 90;
  box-shadow: 0 6px 20px rgba(45, 53, 101, 0.25);
}
.rc-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rc-back-to-top:hover { background: var(--rc-navy-2); transform: translateY(-2px); }

/* ─── Generic scroll-in animation ─────────────────────────────────────── */
.rc-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--rc-ease-out), transform 0.7s var(--rc-ease-out);
}
.rc-reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rc-reveal { opacity: 1; transform: none; transition: none; }
}

/* Legacy hook — kept hidden so existing markup doesn't bleed visually */
.hero-diagonal-rule { display: none; }

/* ==========================================================================
   PART 2 — Inner page components (about / services / cases / clients /
   academy / blog / contact / single / 404 / page)
   ========================================================================== */

/* ─── Extra utility helpers ───────────────────────────────────────────── */
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-10 { margin-top: 2.5rem; }
.pt-8 { padding-top: 2rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-14 { gap: 3.5rem; }
.lg\:col-span-1 { /* default span */ }
.lg\:col-span-2 { }
.md\:col-span-2 { }
@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:mb-14 { margin-bottom: 3.5rem; }
  .md\:pt-12 { padding-top: 3rem; }
}
@media (min-width: 1024px) {
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:gap-14 { gap: 3.5rem; }
}
.max-w-2xl { max-width: 42rem; }
.max-w-xl { max-width: 36rem; }

/* ─── Branded accent: left border quote / callout ─────────────────────── */
.teal-border-left {
  border-left: 3px solid var(--rc-navy);
  padding-left: 1.25rem;
}

/* ─── Tag pill (countries, case tags) ─────────────────────────────────── */
.tag-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--rc-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--rc-navy);
  background: var(--rc-tint-1);
  border: 1px solid var(--rc-line);
  padding: 0.35rem 0.8rem;
  border-radius: var(--rc-radius-pill);
  letter-spacing: -0.005em;
}

/* ─── Services pillar card (navy banner, expandable) ──────────────────── */
.pillar-card {
  position: relative;
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  background: transparent;
  transition: background var(--rc-dur) var(--rc-ease);
}
.pillar-card:hover { background: rgba(255, 255, 255, 0.03); }
@media (min-width: 1024px) {
  .pillar-card:nth-child(4n) { border-right: none; }
}
.pillar-num {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}
.pillar-watermark {
  display: none;
}
.pillar-card .pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--rc-radius-md);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  margin-bottom: 1.25rem;
}
.pillar-card h3 {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: #fff;
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.pillar-card p.summary,
.pillar-card p.detail {
  font-family: var(--rc-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
}
.pillar-card p.detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height var(--rc-dur-slow) var(--rc-ease), opacity var(--rc-dur) var(--rc-ease), margin-top var(--rc-dur) var(--rc-ease);
}
.pillar-card.is-expanded p.detail {
  max-height: 600px;
  opacity: 1;
  margin-top: 0.75rem;
}
.pillar-card .toggle {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--rc-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0;
}
.pillar-card .toggle:hover { color: #fff; }
.pillar-card .toggle .ic-up,
.pillar-card .toggle .lbl-less { display: none; }
.pillar-card.is-expanded .toggle .ic-down,
.pillar-card.is-expanded .toggle .lbl-more { display: none; }
.pillar-card.is-expanded .toggle .ic-up,
.pillar-card.is-expanded .toggle .lbl-less { display: inline-flex; }

/* Toggle-target (services / case-studies) */
.toggle-target {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--rc-dur-slow) var(--rc-ease), opacity var(--rc-dur) var(--rc-ease);
}
[data-toggle-root].is-expanded .toggle-target {
  max-height: 800px;
  opacity: 1;
}

/* Light toggle button (services, case studies sections) */
.toggle-light {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  color: var(--rc-navy);
  font-family: var(--rc-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: 0;
  transition: gap var(--rc-dur) var(--rc-ease);
}
.toggle-light:hover { gap: 0.6rem; }
.toggle-light .ic-up,
.toggle-light .lbl-less { display: none; }
[data-toggle-root].is-expanded .toggle-light .ic-down,
[data-toggle-root].is-expanded .toggle-light .lbl-more { display: none; }
[data-toggle-root].is-expanded .toggle-light .ic-up,
[data-toggle-root].is-expanded .toggle-light .lbl-less { display: inline-flex; }

/* ─── Stat card (case studies banner) ─────────────────────────────────── */
.stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rc-radius-md);
  padding: 1rem 1.25rem;
  min-width: 140px;
}
.stat-card .v {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
}
.stat-card .l {
  font-family: var(--rc-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}

/* ─── Programme card (academy) ────────────────────────────────────────── */
.prog-card {
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-md);
  padding: 1.75rem;
  transition: all var(--rc-dur) var(--rc-ease);
}
.prog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(45, 53, 101, 0.10); border-color: var(--rc-line-strong); }
.prog-card .ic-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--rc-radius-md);
  background: var(--rc-tint-1);
  color: var(--rc-navy);
  margin-bottom: 1.25rem;
}
.prog-card h3 {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--rc-navy);
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}
.prog-card p {
  font-family: var(--rc-body);
  font-size: 0.88rem;
  color: var(--rc-ink-muted);
  line-height: 1.7;
}

/* ─── Form fields (contact) ───────────────────────────────────────────── */
.field-label {
  font-family: var(--rc-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rc-navy);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.field-input,
.field-select,
.field-textarea {
  font-family: var(--rc-body);
  font-size: 0.92rem;
  color: var(--rc-ink);
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-sm);
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color var(--rc-dur-fast) var(--rc-ease), box-shadow var(--rc-dur-fast) var(--rc-ease);
  width: 100%;
  box-sizing: border-box;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--rc-navy);
  box-shadow: 0 0 0 3px rgba(45, 53, 101, 0.10);
}
.field-textarea { resize: vertical; min-height: 140px; }
.field-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--rc-navy-3) 50%), linear-gradient(135deg, var(--rc-navy-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }

/* ─── Article body (single.php, page.php) ─────────────────────────────── */
.entry-content {
  font-family: var(--rc-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--rc-ink-body);
}
.entry-content h2 {
  font-family: var(--rc-display);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 700;
  color: var(--rc-navy);
  margin: 2.5rem 0 1rem;
  line-height: 1.2;
}
.entry-content h3 {
  font-family: var(--rc-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rc-navy);
  margin: 2rem 0 0.75rem;
}
.entry-content p { margin-bottom: 1.25rem; }
.entry-content a { color: var(--rc-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry-content a:hover { color: var(--rc-navy-2); }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content blockquote {
  border-left: 3px solid var(--rc-navy);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.75rem 0;
  font-family: var(--rc-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--rc-navy);
}
.entry-content img { border-radius: var(--rc-radius-md); margin: 1.5rem 0; }
.entry-content code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.92em; background: var(--rc-tint-2); padding: 0.1em 0.4em; border-radius: 3px; }

/* ─── Clients page: animated mesh background ──────────────────────────── */
.rc-singular {
  position: relative;
  background: var(--rc-bg);
  overflow: hidden;
}
.rc-singular-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.rc-mesh-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.rc-mesh-1 { top: -10%; left: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, #C6D2FF 0%, transparent 70%); animation: rcMesh1 22s ease-in-out infinite; }
.rc-mesh-2 { top: 30%; right: -15%; width: 55vw; height: 55vw; background: radial-gradient(circle, #DDE3F5 0%, transparent 70%); animation: rcMesh2 26s ease-in-out infinite; }
.rc-mesh-3 { bottom: -20%; left: 15%; width: 70vw; height: 70vw; background: radial-gradient(circle, #E8ECF5 0%, transparent 70%); animation: rcMesh3 30s ease-in-out infinite; }
.rc-mesh-4 { top: 60%; left: -5%; width: 45vw; height: 45vw; background: radial-gradient(circle, #F0F4FF 0%, transparent 70%); animation: rcMesh4 24s ease-in-out infinite; }
.rc-mesh-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(45, 53, 101, 0.03) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.6;
}
@keyframes rcMesh1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 5%) scale(1.1); } }
@keyframes rcMesh2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6%, 8%) scale(1.08); } }
@keyframes rcMesh3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5%, -7%) scale(1.12); } }
@keyframes rcMesh4 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7%, 4%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .rc-mesh-1, .rc-mesh-2, .rc-mesh-3, .rc-mesh-4 { animation: none; }
}

.rc-singular-section {
  position: relative;
  z-index: 1;
}
.rc-glass-strip,
.rc-glass-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rc-radius-md);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 8px 32px rgba(45, 53, 101, 0.08);
}
.rc-glass-strip { padding: 1.5rem; }
.rc-glass-card { transition: transform var(--rc-dur) var(--rc-ease), box-shadow var(--rc-dur) var(--rc-ease); }
.rc-glass-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(45, 53, 101, 0.12); }

/* ==========================================================================
   PART 3 — v3 design layer (mockup-matching homepage)
   ========================================================================== */

/* ─── Ambient mist — visible blobs, but background not foreground ─────── */
/* Goal: clearly visible color regions hugging viewport edges with the
   center of the page reading as clean cream. Strong enough to see, soft
   enough that page content remains readable. Each orb rotates and
   translates on scroll. */
.rc-ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Ensure page chrome and content sit above the mist */
.site-footer,
.site-main,
main,
.rc-back-to-top {
  position: relative;
  z-index: 1;
}
/* Header keeps its own sticky positioning (defined above) — only set the
   stacking context here so it layers above the mist + page content. */
.site-header { z-index: 100; }
.rc-scroll-progress { z-index: 200; }
.rc-back-to-top { z-index: 90; }

.rc-ambient-orb {
  position: absolute;
  transform:
    translate3d(0, var(--rc-orb-y, 0px), 0)
    rotate(var(--rc-orb-rot, 0deg));
  will-change: transform;
}
.rc-orb-inner {
  position: absolute;
  inset: 0;
  filter: blur(140px);
  opacity: 0.55;
  will-change: transform;
}

/* Layer 1 — navy bloom, upper left corner */
.rc-orb-1 { top: -50%; left: -40%; width: 80vw; height: 80vw; }
.rc-orb-1 .rc-orb-inner {
  background: radial-gradient(ellipse at center, rgba(74, 90, 138, 0.65) 0%, transparent 60%);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  animation: rcMist1 44s ease-in-out infinite;
}
/* Layer 2 — soft sky blue, right edge (replaced rose with cool tone) */
.rc-orb-2 { top: -10%; right: -45%; width: 85vw; height: 75vw; }
.rc-orb-2 .rc-orb-inner {
  background: radial-gradient(ellipse at center, rgba(155, 195, 235, 0.55) 0%, transparent 60%);
  border-radius: 45% 55% 60% 40% / 55% 45% 60% 40%;
  animation: rcMist2 52s ease-in-out infinite;
}
/* Layer 3 — soft violet, lower-mid */
.rc-orb-3 { bottom: -40%; left: -10%; width: 85vw; height: 75vw; }
.rc-orb-3 .rc-orb-inner {
  background: radial-gradient(ellipse at center, rgba(168, 145, 215, 0.50) 0%, transparent 60%);
  border-radius: 55% 45% 50% 50% / 60% 40% 55% 45%;
  animation: rcMist3 58s ease-in-out infinite;
}
/* Layer 4 — pale teal, lower right corner (replaced peach with cool tone) */
.rc-orb-4 { bottom: -45%; right: -30%; width: 80vw; height: 70vw; }
.rc-orb-4 .rc-orb-inner {
  background: radial-gradient(ellipse at center, rgba(140, 195, 200, 0.50) 0%, transparent 60%);
  border-radius: 50% 50% 45% 55% / 45% 55% 50% 50%;
  animation: rcMist4 48s ease-in-out infinite;
}
/* Layer 5 — deep navy whisper, lower left */
.rc-orb-5 { bottom: -50%; left: -45%; width: 75vw; height: 75vw; }
.rc-orb-5 .rc-orb-inner {
  background: radial-gradient(ellipse at center, rgba(45, 53, 101, 0.50) 0%, transparent 60%);
  border-radius: 55% 45% 50% 50%;
  animation: rcMist5 62s ease-in-out infinite;
}

@keyframes rcMist1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%      { transform: translate(12%, 8%) scale(1.12); }
  65%      { transform: translate(-6%, 14%) scale(0.94); }
}
@keyframes rcMist2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-10%, 12%) scale(1.15); }
  75%      { transform: translate(-4%, -8%) scale(0.92); }
}
@keyframes rcMist3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%      { transform: translate(8%, -12%) scale(1.08); }
  70%      { transform: translate(-9%, 6%) scale(0.95); }
}
@keyframes rcMist4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-14%, -10%) scale(1.18); }
}
@keyframes rcMist5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  45%      { transform: translate(11%, -7%) scale(1.10); }
  80%      { transform: translate(-7%, 4%) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .rc-ambient-bg { transition: none; }
  .rc-ambient-orb { animation: none; }
}

/* Section backgrounds need to be translucent enough to show the mist */
body { background: var(--rc-bg) !important; }

/* ─── Helper text (replaces section labels) ───────────────────────────── */
.rc-v3-helper {
  display: block;
  font-family: var(--rc-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--rc-navy-3);
  letter-spacing: 0;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.rc-v3-helper--dark { color: rgba(255, 255, 255, 0.62); }
.rc-v3-helper--center { text-align: center; }

/* ─── Buttons (mockup style — pills) ──────────────────────────────────── */
.rc-v3-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--rc-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--rc-radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--rc-dur) var(--rc-ease);
  cursor: pointer;
  white-space: nowrap;
}
.rc-v3-btn-dark { background: var(--rc-navy); color: #fff; }
.rc-v3-btn-dark:hover { background: #1F2750; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(45, 53, 101, 0.28); color: #fff; }
.rc-v3-btn-ghost { background: rgba(255, 255, 255, 0.7); color: var(--rc-navy); border-color: var(--rc-line-strong); backdrop-filter: blur(8px); }
.rc-v3-btn-ghost:hover { background: #fff; border-color: var(--rc-navy-3); transform: translateY(-1px); }
.rc-v3-btn-light { background: #fff; color: var(--rc-navy); }
.rc-v3-btn-light:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30); color: var(--rc-navy); }
.rc-v3-btn svg { transition: transform var(--rc-dur) var(--rc-ease); }
.rc-v3-btn:hover svg { transform: translateX(3px); }

.rc-v3-link-dark {
  font-family: var(--rc-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: all var(--rc-dur) var(--rc-ease);
}
.rc-v3-link-dark:hover { color: #fff; gap: 0.7rem; }
.rc-v3-link-dark svg { transition: transform var(--rc-dur) var(--rc-ease); }
.rc-v3-link-dark:hover svg { transform: translateX(3px); }

/* ─── Section titles (single-color per section) ───────────────────────── */
.rc-v3-section-title {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 5.5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--rc-navy);
  max-width: 18ch;
}
.rc-v3-section-title-dark {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 5.5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 14ch;
}

/* ─── 1. HERO ─────────────────────────────────────────────────────────── */
.rc-v3-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 96px);
  background: transparent; /* ambient orbs show through */
}
.rc-v3-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rc-navy);
  z-index: 1;
}
.rc-v3-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .rc-v3-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
}

/* THE three-tone animated headline */
.rc-v3-hero-title {
  font-family: var(--rc-display);
  font-weight: 800;
  font-size: clamp(3.25rem, 7.5vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin-bottom: 2rem;
}
.rc-v3-hero-title .line {
  display: block;
  opacity: 0;
}
.rc-v3-hero-title .line.is-in {
  opacity: 1;
}
/* Per-word reveal spans (built at runtime by polish.js). Each word rises
   and fades with its own transition-delay for a cascading reveal. */
.rc-hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.rc-hero-word.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Three distinct tones — light, mid, deep navy */
.rc-v3-hero-title .l1 { color: var(--rc-navy-3); transition-delay: 0.15s; }
.rc-v3-hero-title .l2 { color: var(--rc-navy-2); transition-delay: 0.45s; }
.rc-v3-hero-title .l3 { color: var(--rc-navy);   transition-delay: 0.75s; }
@media (prefers-reduced-motion: reduce) {
  .rc-v3-hero-title .line { opacity: 1; transform: none; transition: none; }
}

.rc-v3-hero-claim {
  font-family: var(--rc-body);
  font-size: clamp(1.1rem, 1.55vw, 1.3rem);
  line-height: 1.5;
  color: var(--rc-navy);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  max-width: 540px;
}
.rc-v3-hero-sub {
  font-family: var(--rc-body);
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.7;
  color: var(--rc-ink-muted);
  max-width: 540px;
  margin-bottom: 2.25rem;
}
.rc-v3-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Map card */
.rc-v3-map-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--rc-radius-lg);
  padding: 1.85rem;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(45, 53, 101, 0.10);
}
.rc-v3-map-heading {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--rc-navy);
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 1.25rem;
}

/* ─── Adria map: snap-to-Croatia behavior ─────────────────────────────────
   Croatia is the ONLY country visible at rest. The other 8 countries are
   scaled to zero and translated toward Croatia's centroid (~265,245 in the
   SVG viewBox) so they're invisible and tucked under Croatia. Hovering a
   country name or path "snaps" that country back out to its real
   geographic position with a small lift and drop-shadow. */
.adria-map-wrap .rc-country {
  cursor: pointer;
  transform-origin: center;
  transform-box: fill-box;
  --tx: 0;
  --ty: 0;
  --scale: 1;
  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              fill-opacity 0.22s ease,
              stroke-opacity 0.22s ease,
              filter 0.22s ease;
}

/* Hide all non-Croatia countries at rest. Direct opacity rule (no var
   resolution) so even older mobile browsers render the hidden state on
   initial paint. */
.adria-map-wrap .rc-country:not([data-rc-country="hr"]) {
  opacity: 0;
  pointer-events: none;
}

/* Per-country resting transforms: each country is translated toward
   Croatia AND scaled to zero, so when active is removed they tuck
   under Croatia. Offsets are each country's centroid → Croatia (~265,245). */
.adria-map-wrap .rc-country[data-rc-country="si"] { --tx: 15px;   --ty: 27px;  --scale: 0; }
.adria-map-wrap .rc-country[data-rc-country="ba"] { --tx: -10px;  --ty: -5px;  --scale: 0; }
.adria-map-wrap .rc-country[data-rc-country="rs"] { --tx: -50px;  --ty: -2px;  --scale: 0; }
.adria-map-wrap .rc-country[data-rc-country="me"] { --tx: -33px;  --ty: -29px; --scale: 0; }
.adria-map-wrap .rc-country[data-rc-country="al"] { --tx: -40px;  --ty: -52px; --scale: 0; }
.adria-map-wrap .rc-country[data-rc-country="xk"] { --tx: -58px;  --ty: -43px; --scale: 0; }
.adria-map-wrap .rc-country[data-rc-country="mk"] { --tx: -75px;  --ty: -75px; --scale: 0; }
.adria-map-wrap .rc-country[data-rc-country="bg"] { --tx: -100px; --ty: -25px; --scale: 0; }

/* Croatia: featured at rest. Slightly enlarged + drop-shadow, small NW offset. */
.adria-map-wrap .rc-country[data-rc-country="hr"] {
  --tx: -3.5px;
  --ty: -2px;
  --scale: 1.04;
  filter: drop-shadow(0 2px 6px rgba(45, 53, 101, 0.25));
}

/* Active state: country snaps to its real position with lift + shadow. */
.adria-map-wrap .rc-country.is-active {
  opacity: 1;
  pointer-events: auto;
  --scale: 1.08;
  fill-opacity: 1;
  stroke-opacity: 1;
  filter: drop-shadow(0 4px 10px rgba(45, 53, 101, 0.35));
}
.adria-map-wrap .rc-country[data-rc-country="si"].is-active { --tx: -3px;   --ty: -3px; }
.adria-map-wrap .rc-country[data-rc-country="ba"].is-active { --tx: -3.5px; --ty: -1px; }
.adria-map-wrap .rc-country[data-rc-country="rs"].is-active { --tx: 1px;    --ty: -4px; }
.adria-map-wrap .rc-country[data-rc-country="me"].is-active { --tx: -4px;   --ty: 1px;  }
.adria-map-wrap .rc-country[data-rc-country="al"].is-active { --tx: -1px;   --ty: 4px;  }
.adria-map-wrap .rc-country[data-rc-country="xk"].is-active { --tx: 3px;    --ty: 3px;  }
.adria-map-wrap .rc-country[data-rc-country="mk"].is-active { --tx: 2px;    --ty: 4px;  }
.adria-map-wrap .rc-country[data-rc-country="bg"].is-active { --tx: 4px;    --ty: 0;    }

/* Croatia active state: a bit larger than the others, keeps rest offset. */
.adria-map-wrap .rc-country[data-rc-country="hr"].is-active {
  --tx: -3.5px;
  --ty: -2px;
  --scale: 1.10;
}

/* Country name list under the map */
.adria-map-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.35rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rc-line);
}
.adria-map-list .country-name {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  font-family: var(--rc-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--rc-navy-3);
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: var(--rc-radius-pill);
  transform-origin: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: color 0.18s ease, background 0.18s ease, font-weight 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .adria-map-list .country-name:hover {
    background: rgba(45, 53, 101, 0.06);
    color: var(--rc-navy);
  }
}
/* Croatia label — always featured */
.adria-map-list .country-name.is-featured {
  color: var(--rc-navy);
  font-weight: 600;
}
/* Active label — matches the hovered/snapped country */
.adria-map-list .country-name.is-active {
  color: var(--rc-navy);
  font-weight: 700;
  transform: translateY(-1px) scale(1.08);
}
.adria-map-list .country-name.is-featured.is-active {
  transform: translateY(-1px) scale(1.12);
}

/* ─── 2. STATS ────────────────────────────────────────────────────────── */
.rc-v3-stats {
  background: transparent;
  padding: clamp(56px, 6vw, 80px) 0;
  position: relative;
  overflow: hidden;
}
/* Soft Adria coastline silhouette ornament — sits behind the stats at low
   opacity, anchored to the right edge. Same visual language as the About
   page coastline section, reusing the design vocabulary. */
.rc-v3-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at 85% 50%, rgba(45, 53, 101, 0.045) 0%, transparent 55%);
  pointer-events: none;
}
.rc-v3-stats > * { position: relative; }
.rc-v3-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
}
@media (min-width: 768px) { .rc-v3-stats-grid { grid-template-columns: repeat(5, 1fr); } }

.rc-v3-stat { display: flex; flex-direction: column; gap: 0.6rem; }
.rc-v3-stat-num {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--rc-navy);
}
.rc-v3-stat-lbl {
  font-family: var(--rc-body);
  font-size: 0.85rem;
  color: var(--rc-ink-muted);
  font-weight: 500;
  line-height: 1.4;
}
.rc-v3-stats-note {
  margin-top: 2.25rem;
  font-family: var(--rc-body);
  font-size: 0.8rem;
  color: var(--rc-ink-4);
}

/* ─── 3 + 4. CLIENTS + TESTIMONIAL ────────────────────────────────────── */
.rc-v3-clients { padding: clamp(80px, 9vw, 120px) 0; background: transparent; }
.rc-v3-clients .rc-v3-section-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 3.5rem;
}
.rc-v3-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 5rem;
}
@media (min-width: 768px) { .rc-v3-logo-grid { grid-template-columns: repeat(6, 1fr); } }

.rc-v3-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-family: var(--rc-body);
  font-size: 0.78rem;
  color: var(--rc-ink-4);
  font-weight: 500;
  transition: all var(--rc-dur) var(--rc-ease);
}
.rc-v3-logo:hover { transform: translateY(-2px); }

.rc-v3-testimonial {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rc-radius-xl);
  padding: clamp(2.5rem, 5vw, 4rem);
  margin: 0;
  box-shadow: 0 12px 48px rgba(45, 53, 101, 0.08);
}
.rc-v3-quote-mark {
  font-family: var(--rc-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--rc-navy);
  font-weight: 700;
  margin-bottom: 1.25rem;
  display: block;
}
.rc-v3-testimonial-body {
  font-family: var(--rc-display);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.4;
  color: var(--rc-navy);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 2.25rem;
  max-width: 820px;
}
.rc-v3-testimonial-attr { display: flex; align-items: center; gap: 0.9rem; }
.rc-v3-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rc-navy-3), var(--rc-navy));
  flex-shrink: 0;
}
.rc-v3-testimonial-name {
  font-family: var(--rc-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rc-navy);
  letter-spacing: -0.005em;
}
.rc-v3-testimonial-role {
  font-family: var(--rc-body);
  font-size: 0.85rem;
  color: var(--rc-ink-muted);
  margin-top: 2px;
}

/* ─── 5. DARK SERVICES GRID ───────────────────────────────────────────── */
.rc-v3-services {
  background: linear-gradient(180deg, var(--rc-navy) 0%, #1F2750 35%, #232C58 65%, var(--rc-navy) 100%);
  color: #fff;
  padding: clamp(80px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.rc-v3-services::before {
  content: '';
  position: absolute;
  top: -30%; left: 30%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(120, 145, 215, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.rc-v3-services::after {
  content: '';
  position: absolute;
  bottom: -25%; right: 5%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(80, 105, 170, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.rc-v3-services > * { position: relative; }

.rc-v3-services-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.rc-v3-services-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  margin-bottom: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.rc-v3-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rc-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.rc-v3-strip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.rc-v3-strip-sep { color: rgba(255, 255, 255, 0.25); user-select: none; }

.rc-v3-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) { .rc-v3-services-grid { grid-template-columns: 1fr 1fr; } }

.rc-v3-service-card {
  background: var(--rc-navy);
  padding: clamp(28px, 3.5vw, 44px);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background var(--rc-dur) var(--rc-ease);
  position: relative;
}
.rc-v3-service-card:hover { background: #353E73; }
.rc-v3-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--rc-radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  margin-bottom: 1.85rem;
}
.rc-v3-service-card h3 {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: #fff;
  margin-bottom: 0.85rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.rc-v3-service-card p {
  font-family: var(--rc-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  flex: 1;
}
.rc-v3-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.85rem;
  font-family: var(--rc-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
}
.rc-v3-service-cta svg { transition: transform var(--rc-dur) var(--rc-ease); }
.rc-v3-service-card:hover .rc-v3-service-cta svg { transform: translateX(4px); }

/* ─── 6. WHY — NUMBERED PILLARS ───────────────────────────────────────── */
.rc-v3-why {
  padding: clamp(80px, 9vw, 120px) 0;
  background: transparent;
}
.rc-v3-why-head { margin-bottom: 4rem; }
.rc-v3-why .rc-v3-helper { margin-bottom: 1.5rem; }
.rc-v3-why .rc-v3-section-title { max-width: 22ch; }

.rc-v3-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) { .rc-v3-pillars { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.rc-v3-pillar { padding-top: 0; }
.rc-v3-pillar-num {
  font-family: var(--rc-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rc-navy);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rc-line-strong);
  letter-spacing: -0.005em;
}
.rc-v3-pillar h3 {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  color: var(--rc-navy);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rc-v3-pillar p {
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rc-ink-body);
}

/* ─── 7. COVERAGE ─────────────────────────────────────────────────────── */
.rc-v3-coverage {
  padding: clamp(80px, 9vw, 120px) 0;
  background: rgba(241, 245, 249, 0.50);
  position: relative;
}
.rc-v3-coverage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) { .rc-v3-coverage-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.rc-v3-coverage .rc-v3-section-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 1.5rem;
}
.rc-v3-coverage-sub {
  display: block;
  font-size: 0.5em;
  color: var(--rc-navy-3);
  font-weight: 500;
  margin-top: 0.5rem;
}
.rc-v3-coverage-countries {
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rc-ink-body);
  margin-bottom: 2rem;
  max-width: 440px;
}
.rc-v3-coverage-map {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rc-radius-lg);
  padding: 2rem;
  box-shadow: 0 12px 40px rgba(45, 53, 101, 0.10);
}

/* ─── 8. NETWORK STRIP ────────────────────────────────────────────────── */
.rc-v3-network {
  padding: clamp(56px, 6vw, 80px) 0;
  background: transparent;
}
.rc-v3-network-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .rc-v3-network-row { flex-direction: row; justify-content: space-between; text-align: left; gap: 2.5rem; }
}
.rc-v3-network-lbl {
  font-family: var(--rc-body);
  font-size: 0.88rem;
  color: var(--rc-ink-muted);
  max-width: 220px;
  line-height: 1.5;
}
.rc-v3-network-logo { flex-shrink: 0; opacity: 0.85; }
.rc-v3-network-txt {
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--rc-ink-2);
  max-width: 380px;
  font-weight: 500;
}

/* ─── 9. PULL QUOTE ───────────────────────────────────────────────────── */
/* Marina's portrait fades in from the right as a subtle background; the
   quote text sits on the left for legibility. Mobile reverts to no image. */
.rc-v3-pullquote-sec {
  padding: clamp(80px, 9vw, 120px) 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.rc-v3-pullquote-sec::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background-image: var(--rc-pullquote-portrait, none);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 30%, transparent 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 30%, transparent 100%);
  pointer-events: none;
}
.rc-v3-pullquote-sec > .container { position: relative; z-index: 1; }
.rc-v3-pullquote-sec .rc-v3-pullquote {
  max-width: 32ch;
  text-align: left;
  margin: 0 0 1.25rem;
}
.rc-v3-pullquote-sec .rc-v3-pullquote-author {
  max-width: 32ch;
  text-align: left;
  margin: 0;
}
@media (max-width: 768px) {
  .rc-v3-pullquote-sec::after { display: none; }
  .rc-v3-pullquote-sec .rc-v3-pullquote { max-width: none; text-align: center; margin: 0 auto 1.25rem; }
  .rc-v3-pullquote-sec .rc-v3-pullquote-author { max-width: none; text-align: center; }
}
.rc-v3-pullquote {
  font-family: var(--rc-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.3;
  color: var(--rc-navy);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 920px;
  margin: 0 auto 2rem;
}
.rc-v3-pullquote-author {
  text-align: center;
  font-family: var(--rc-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--rc-navy-3);
}

/* ─── 10. FINAL CTA ───────────────────────────────────────────────────── */
.rc-v3-cta {
  background: linear-gradient(180deg, var(--rc-navy) 0%, #1F2750 35%, #232C58 65%, var(--rc-navy) 100%);
  color: #fff;
  padding: clamp(80px, 9vw, 120px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rc-v3-cta::before {
  content: '';
  position: absolute;
  top: -30%; left: 30%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(120, 145, 215, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.rc-v3-cta::after {
  content: '';
  position: absolute;
  bottom: -25%; right: 5%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(80, 105, 170, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.rc-v3-cta > * { position: relative; z-index: 1; }
.rc-v3-cta-title {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 1.25rem;
  color: #fff;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.rc-v3-cta-sub {
  font-family: var(--rc-body);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2.5rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   PART 4 — v3 inner page components
   ========================================================================== */

/* ─── Generic page sections ──────────────────────────────────────────── */
.rc-v3-section-light { padding: clamp(80px, 9vw, 120px) 0; background: transparent; }
.rc-v3-section-light--tight { padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 64px); }
.rc-v3-section-soft  { padding: clamp(80px, 9vw, 120px) 0; background: rgba(241, 245, 249, 0.50); }
.rc-v3-section-tight { padding: clamp(48px, 6vw, 72px) 0; background: transparent; }

/* ─── Page hero (shared by about/services/cases/clients/blog/contact/404/single) ─── */
.rc-v3-page-hero {
  position: relative;
  padding: clamp(96px, 11vw, 140px) 0 clamp(56px, 7vw, 80px);
  background: transparent;
}
.rc-v3-page-hero--center { text-align: center; }
.rc-v3-page-hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rc-v3-page-hero--image .container { position: relative; z-index: 1; }
.rc-v3-page-hero-tint {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(250, 250, 248, 0.92) 0%, rgba(240, 244, 255, 0.92) 100%);
  pointer-events: none;
}
.rc-v3-page-hero-tint--dark {
  background: linear-gradient(135deg, rgba(45, 53, 101, 0.86) 0%, rgba(45, 53, 101, 0.70) 100%);
}
.rc-v3-page-hero--dark { padding: clamp(120px, 14vw, 180px) 0 clamp(96px, 11vw, 140px); }

.rc-v3-page-title {
  font-family: var(--rc-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--rc-navy);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}
.rc-v3-page-title--light { color: #fff; max-width: 22ch; }
.rc-v3-page-lede {
  font-family: var(--rc-body);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--rc-ink-2);
  max-width: 680px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.rc-v3-page-lede--light { color: rgba(255, 255, 255, 0.85); }
.rc-v3-page-lede--italic { font-style: italic; }

/* ─── Shared building blocks ─────────────────────────────────────────── */
.rc-v3-2col-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .rc-v3-2col-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  /* Top-aligned variant — photo + experience column aligns to the top of
     the story column instead of vertically centering. */
  .rc-v3-2col-grid--top { align-items: start; }
}

.rc-v3-section-title--md { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.rc-v3-section-title--center { text-align: center; margin-left: auto; margin-right: auto; }
.rc-v3-section-title--light { color: #fff; }

.rc-v3-prose {
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--rc-ink-body);
  margin-bottom: 1.25rem;
  max-width: 60ch;
}
.rc-v3-prose:last-child { margin-bottom: 0; }
.rc-v3-prose-muted {
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rc-ink-muted);
  max-width: 56ch;
  margin-top: 1rem;
}
.rc-v3-prose-muted--center { margin-left: auto; margin-right: auto; text-align: center; }
.rc-v3-prose-muted--light { color: rgba(255, 255, 255, 0.85); }

.rc-v3-prose-block { max-width: 720px; }

.rc-v3-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--rc-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rc-navy);
  text-decoration: none;
  transition: gap var(--rc-dur) var(--rc-ease), color var(--rc-dur) var(--rc-ease);
}
.rc-v3-link-cta:hover { gap: 0.7rem; color: var(--rc-navy-2); }
.rc-v3-link-cta svg { transition: transform var(--rc-dur) var(--rc-ease); }
.rc-v3-link-cta:hover svg { transform: translateX(3px); }
.rc-v3-link-cta--back svg { transition: transform var(--rc-dur) var(--rc-ease); }
.rc-v3-link-cta--back:hover { gap: 0.7rem; }

/* ─── About: founder frame ───────────────────────────────────────────── */
.rc-v3-founder-frame {
  position: relative;
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(45, 53, 101, 0.14);
}
.rc-v3-founder-img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  object-position: top;
  display: block;
}
.rc-v3-founder-card {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(to top, rgba(45, 53, 101, 0.95), rgba(45, 53, 101, 0.7) 80%, transparent);
}
.rc-v3-founder-name {
  font-family: var(--rc-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
}
.rc-v3-founder-role {
  font-family: var(--rc-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4px;
}

/* Home: Meet the Founder block (under the pull-quote) ─────────────────
   Two-column layout: large office photo on the left, eyebrow + name +
   two paragraphs of bio + Full profile CTA on the right. Soft cool-gray
   background so it sits distinctly between the pull-quote and the dark
   final CTA. */
.rc-v3-founder-block {
  padding: clamp(80px, 9vw, 120px) 0;
  background: rgba(241, 245, 249, 0.55);
}
.rc-v3-founder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .rc-v3-founder-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 5rem;
  }
}
.rc-v3-founder-photo {
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(45, 53, 101, 0.14);
  background: #fff;
}
.rc-v3-founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  object-position: center 25%;
}
.rc-v3-founder-body { max-width: 540px; }
.rc-v3-founder-body .rc-v3-section-title {
  max-width: none;
  margin-bottom: 1.5rem;
}
.rc-v3-founder-body .rc-v3-prose {
  max-width: none;
  margin-bottom: 1.25rem;
}
.rc-v3-founder-body .rc-v3-prose:last-of-type {
  margin-bottom: 0;
}

/* About: quote callouts inside the story block */
.rc-v3-quote-callout {
  border-left: 3px solid var(--rc-navy);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 1.5rem 0;
}
.rc-v3-quote-callout p {
  font-family: var(--rc-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--rc-ink-2);
  font-weight: 500;
}
.rc-v3-quote-callout--accent p { color: var(--rc-navy); font-weight: 500; }

/* About: experience stats grid */
.rc-v3-exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 1.5rem;
}
.rc-v3-exp-cell {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rc-line);
}
.rc-v3-exp-lbl {
  font-family: var(--rc-body);
  font-size: 0.82rem;
  color: var(--rc-navy-3);
  font-weight: 500;
  margin-bottom: 0.35rem;
}
.rc-v3-exp-val {
  font-family: var(--rc-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rc-navy);
  letter-spacing: -0.01em;
}

/* About: image break */
.rc-v3-image-break {
  position: relative;
  height: 360px;
  overflow: hidden;
}
.rc-v3-image-break img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.rc-v3-image-break-tint {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(45, 53, 101, 0.25), rgba(45, 53, 101, 0.55));
}

/* About: country pill + team list (re-used on case studies) */
.rc-v3-country-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rc-v3-country-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--rc-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--rc-navy);
  background: rgba(45, 53, 101, 0.06);
  border: 1px solid rgba(45, 53, 101, 0.10);
  padding: 0.45rem 0.85rem;
  border-radius: var(--rc-radius-pill);
}

.rc-v3-team-list { display: flex; flex-direction: column; margin-top: 1.5rem; }
.rc-v3-team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rc-line);
}
.rc-v3-team-role {
  font-family: var(--rc-body);
  font-size: 0.95rem;
  color: var(--rc-ink-2);
  font-weight: 500;
}
.rc-v3-team-tag {
  font-family: var(--rc-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rc-navy);
  background: rgba(45, 53, 101, 0.08);
  padding: 0.3rem 0.75rem;
  border-radius: var(--rc-radius-pill);
}

/* About: timeline */
.rc-v3-process-head { max-width: 720px; margin-bottom: 4rem; }
.rc-v3-process-head .rc-v3-helper { margin-bottom: 1rem; }
.rc-v3-timeline { position: relative; }
.rc-v3-timeline-line {
  position: absolute;
  top: 20px;
  left: 4%; right: 4%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--rc-line-strong) 8%, var(--rc-line-strong) 92%, transparent 100%);
  z-index: 0;
}
@media (max-width: 767px) { .rc-v3-timeline-line { display: none; } }
.rc-v3-timeline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  position: relative;
}
@media (min-width: 768px) { .rc-v3-timeline-grid { grid-template-columns: repeat(5, 1fr); gap: 2rem; } }

.rc-v3-timeline-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Override the global .rc-reveal transition with one that includes a
     per-step stagger delay. --rc-stagger is set inline by the template
     (0, 1, 2, 3, 4) so each step's reveal lands ~0.2s after the previous. */
  transition: opacity 0.8s var(--rc-ease-out), transform 0.8s var(--rc-ease-out);
  transition-delay: calc(var(--rc-stagger, 0) * 0.18s);
}
.rc-v3-timeline-dot {
  position: relative;
  z-index: 1;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--rc-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--rc-navy);
  letter-spacing: -0.01em;
}
.rc-v3-timeline-step.is-last .rc-v3-timeline-dot {
  background: var(--rc-navy);
  border-color: var(--rc-navy);
  color: #fff;
}
.rc-v3-timeline-week {
  font-family: var(--rc-body);
  font-size: 0.85rem;
  color: var(--rc-navy-3);
  font-weight: 500;
}
.rc-v3-timeline-step.is-last .rc-v3-timeline-week { color: var(--rc-navy); font-weight: 600; }
.rc-v3-timeline-title {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--rc-navy);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.rc-v3-timeline-desc {
  font-family: var(--rc-body);
  font-size: 0.92rem;
  color: var(--rc-ink-muted);
  line-height: 1.75;
}

/* About: REA360 callout */
.rc-v3-callout {
  padding: clamp(56px, 7vw, 88px) 0;
  background: linear-gradient(135deg, rgba(240, 244, 255, 0.6) 0%, rgba(238, 242, 248, 0.6) 100%);
}
.rc-v3-callout-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 900px) {
  .rc-v3-callout-row { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}
.rc-v3-callout-text { max-width: 560px; }
.rc-v3-callout-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.rc-v3-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--rc-navy);
  padding: 0.3rem 0.75rem;
  border-radius: var(--rc-radius-pill);
}
.rc-v3-badge--light {
  background: rgba(255, 255, 255, 0.95);
  color: var(--rc-navy);
}

/* ─── Dark section (shared) ──────────────────────────────────────────── */
.rc-v3-dark-section {
  background: linear-gradient(180deg, var(--rc-navy) 0%, #1F2750 35%, #232C58 65%, var(--rc-navy) 100%);
  color: #fff;
  padding: clamp(80px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.rc-v3-dark-section--compact { padding: clamp(48px, 6vw, 80px) 0; }
.rc-v3-dark-section::before {
  content: '';
  position: absolute;
  top: -30%; left: 30%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(120, 145, 215, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.rc-v3-dark-section::after {
  content: '';
  position: absolute;
  bottom: -25%; right: 5%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(80, 105, 170, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.rc-v3-dark-section > * { position: relative; z-index: 1; }
.rc-v3-dark-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .rc-v3-dark-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 3rem; }
}
.rc-v3-dark-sub {
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 380px;
}

.rc-v3-dark-stats-row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .rc-v3-dark-stats-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 3rem; }
}
.rc-v3-dark-stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.rc-v3-dark-stat {
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--rc-radius-md);
  min-width: 130px;
}
.rc-v3-dark-stat-v {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
}
.rc-v3-dark-stat-l {
  font-family: var(--rc-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.5rem;
}

/* ─── Services: method grid (4 pillars on dark) ──────────────────────── */
.rc-v3-method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
}
@media (min-width: 640px) { .rc-v3-method-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .rc-v3-method-grid { grid-template-columns: repeat(4, 1fr); } }

.rc-v3-method-card {
  background: var(--rc-navy);
  padding: clamp(28px, 3.5vw, 40px);
  min-height: 240px;
  position: relative;
  border: none !important;
  transition: background var(--rc-dur) var(--rc-ease);
}
.rc-v3-method-card:hover { background: #353E73; }
.rc-v3-method-num {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}
.rc-v3-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--rc-radius-md);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  margin-bottom: 1.5rem;
}
.rc-v3-method-card h3 {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
}
.rc-v3-method-card p.summary,
.rc-v3-method-card p.detail {
  font-family: var(--rc-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
}

/* ─── Services: "what" intro head ────────────────────────────────────── */
.rc-v3-what-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .rc-v3-what-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 3rem; }
}

/* ─── Services: each big service block ───────────────────────────────── */
.rc-v3-svc-block { padding: clamp(64px, 8vw, 100px) 0; }
.rc-v3-svc-block--white { background: transparent; }
.rc-v3-svc-block--soft  { background: rgba(241, 245, 249, 0.50); }
.rc-v3-svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) { .rc-v3-svc-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.rc-v3-svc-label-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.rc-v3-svc-num {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rc-navy);
  letter-spacing: 0.04em;
}
.rc-v3-svc-rule { display: inline-block; width: 36px; height: 1.5px; background: var(--rc-navy); }

.rc-v3-svc-card {
  background: #fff;
  border-radius: var(--rc-radius-lg);
  border-top: 3px solid var(--rc-navy);
  box-shadow: 0 12px 40px rgba(45, 53, 101, 0.10);
  overflow: hidden;
}
.rc-v3-svc-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.rc-v3-svc-card-body { padding: 2rem; border-top: 1px solid var(--rc-line-soft); }
.rc-v3-svc-deliv-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; color: var(--rc-navy); }
.rc-v3-svc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.rc-v3-svc-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.rc-v3-svc-check { color: var(--rc-navy); flex-shrink: 0; margin-top: 3px; }
.rc-v3-svc-list span:last-child {
  font-family: var(--rc-body);
  font-size: 0.95rem;
  color: var(--rc-ink-2);
  line-height: 1.65;
}

/* Toggle inside services / cases */
.rc-v3-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--rc-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--rc-navy);
  cursor: pointer;
  transition: gap var(--rc-dur) var(--rc-ease);
}
.rc-v3-toggle:hover { gap: 0.6rem; color: var(--rc-navy-2); }
.rc-v3-toggle .ic-up,
.rc-v3-toggle .lbl-less { display: none; }
[data-toggle-root].is-expanded .rc-v3-toggle .ic-down,
[data-toggle-root].is-expanded .rc-v3-toggle .lbl-more { display: none; }
[data-toggle-root].is-expanded .rc-v3-toggle .ic-up,
[data-toggle-root].is-expanded .rc-v3-toggle .lbl-less { display: inline-flex; }

/* ─── Services: cycle cards ──────────────────────────────────────────── */
.rc-v3-cycle-sec {
  padding: clamp(80px, 9vw, 120px) 0;
  background: linear-gradient(180deg, rgba(240, 244, 255, 0.5) 0%, rgba(250, 250, 248, 0.3) 100%);
}
.rc-v3-cycle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .rc-v3-cycle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rc-v3-cycle-grid { grid-template-columns: repeat(4, 1fr); } }
.rc-v3-cycle-card {
  background: #fff;
  border-radius: var(--rc-radius-lg);
  border-top: 3px solid var(--rc-navy);
  padding: 2rem 1.75rem 2.25rem;
  box-shadow: 0 4px 20px rgba(45, 53, 101, 0.06);
  transition: transform var(--rc-dur) var(--rc-ease), box-shadow var(--rc-dur) var(--rc-ease);
}
.rc-v3-cycle-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(45, 53, 101, 0.10); }
.rc-v3-cycle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.rc-v3-cycle-num {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 2.5rem;
  color: rgba(45, 53, 101, 0.12);
  letter-spacing: -0.03em;
  line-height: 1;
}
.rc-v3-cycle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--rc-radius-md);
  background: var(--rc-tint-1);
  color: var(--rc-navy);
}
.rc-v3-cycle-title {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--rc-navy);
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
}
.rc-v3-cycle-desc {
  font-family: var(--rc-body);
  font-size: 0.92rem;
  color: var(--rc-ink-muted);
  line-height: 1.7;
}

/* ─── Services: REA360 Portal CTA (dark) ─────────────────────────────── */
.rc-v3-portal {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) { .rc-v3-portal { flex-direction: row; justify-content: space-between; gap: 3rem; align-items: center; } }
.rc-v3-portal-text { max-width: 620px; }
.rc-v3-portal-title {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: #fff;
  line-height: 1.3;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}
.rc-v3-portal-lead {
  font-family: var(--rc-body);
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 2rem;
}
.rc-v3-portal-lists { display: flex; flex-direction: column; gap: 1.5rem; }
.rc-v3-portal-mini {
  font-family: var(--rc-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.75rem;
}
.rc-v3-portal-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rc-v3-portal-tag {
  font-family: var(--rc-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.4rem 0.85rem;
  border-radius: var(--rc-radius-pill);
}
.rc-v3-portal-tag--light {
  background: rgba(255, 255, 255, 0.95);
  color: var(--rc-navy);
  border-color: transparent;
}
.rc-v3-portal-box {
  flex-shrink: 0;
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  border-radius: var(--rc-radius-lg);
  padding: 2rem;
}
.rc-v3-portal-box-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rc-v3-portal-box-title {
  font-family: var(--rc-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: -0.025em;
}
.rc-v3-portal-box-desc {
  font-family: var(--rc-body);
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}
.rc-v3-portal-box-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--rc-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: gap var(--rc-dur) var(--rc-ease), color var(--rc-dur) var(--rc-ease);
}
.rc-v3-portal-box-cta:hover { color: #fff; gap: 0.6rem; }

/* ─── Services CTA band (reused on cases, single, blog) ──────────────── */
.rc-v3-cta-band {
  background: linear-gradient(180deg, var(--rc-navy) 0%, #1F2750 50%, var(--rc-navy) 100%);
  color: #fff;
  padding: clamp(80px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.rc-v3-cta-band::before {
  content: '';
  position: absolute;
  top: -30%; left: 30%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(120, 145, 215, 0.16) 0%, transparent 60%);
  pointer-events: none;
}
.rc-v3-cta-band::after {
  content: '';
  position: absolute;
  bottom: -25%; right: 5%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(80, 105, 170, 0.14) 0%, transparent 60%);
  pointer-events: none;
}
.rc-v3-cta-band > * { position: relative; z-index: 1; }
.rc-v3-cta-band-row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .rc-v3-cta-band-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; }
}
.rc-v3-cta-band-title {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: #fff;
  margin-bottom: 0.75rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.rc-v3-cta-band-sub {
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}

/* ─── Case studies ───────────────────────────────────────────────────── */
.rc-v3-cases-stack { display: flex; flex-direction: column; gap: 4rem; }
.rc-v3-case { padding-bottom: 4rem; border-bottom: 1px solid var(--rc-line-soft); }
.rc-v3-case:last-child { border-bottom: none; }
.rc-v3-case-img-frame {
  position: relative;
  height: 240px;
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.rc-v3-case-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-v3-case-img-tint {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(45, 53, 101, 0.65) 0%, rgba(45, 53, 101, 0.15) 100%);
}
.rc-v3-case-scope {
  position: absolute;
  bottom: 1.25rem; left: 1.25rem;
  padding: 0.4rem 0.95rem;
  font-family: var(--rc-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(45, 53, 101, 0.92);
  border-radius: var(--rc-radius-pill);
  text-transform: uppercase;
}
.rc-v3-case-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) { .rc-v3-case-body { grid-template-columns: 1fr 2fr; gap: 4rem; } }
.rc-v3-case-aside { }
.rc-v3-case-num {
  font-family: var(--rc-display);
  font-size: 3.75rem;
  font-weight: 700;
  color: rgba(45, 53, 101, 0.10);
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: 1rem;
}
.rc-v3-case-aside-sub {
  font-family: var(--rc-body);
  font-size: 0.85rem;
  color: var(--rc-ink-4);
  margin-bottom: 1.5rem;
}
.rc-v3-case-main { }
.rc-v3-case-blocks { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.rc-v3-case-block {
  border-left: 3px solid var(--rc-navy);
  padding: 0.25rem 0 0.25rem 1.5rem;
}
.rc-v3-helper--accent { color: var(--rc-navy); font-weight: 600; }

/* ─── Clients page (glass cards on ambient bg) ───────────────────────── */
.rc-v3-glass-block {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rc-radius-lg);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  padding: 1.85rem;
  box-shadow: 0 8px 32px rgba(45, 53, 101, 0.08);
}
.rc-v3-clients-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@media (min-width: 640px) { .rc-v3-clients-logo-grid { grid-template-columns: repeat(4, 1fr); } }
.rc-v3-clients-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  font-family: var(--rc-body);
  font-size: 0.72rem;
  color: var(--rc-ink-muted);
  font-weight: 500;
}
.rc-v3-clients-stats-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.rc-v3-clients-stats-head .rc-v3-section-title { margin-left: auto; margin-right: auto; }
.rc-v3-clients-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .rc-v3-clients-stats-grid { grid-template-columns: repeat(3, 1fr); } }
.rc-v3-glass-stat {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rc-radius-lg);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  padding: 2.25rem 1.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(45, 53, 101, 0.08);
  transition: transform var(--rc-dur) var(--rc-ease), box-shadow var(--rc-dur) var(--rc-ease);
}
.rc-v3-glass-stat:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(45, 53, 101, 0.14); }
.rc-v3-glass-stat-num {
  display: block;
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 5vw, 4rem);
  color: var(--rc-navy);
  letter-spacing: -0.03em;
  line-height: 1;
}
.rc-v3-glass-stat-lbl {
  display: block;
  font-family: var(--rc-body);
  font-size: 0.95rem;
  color: var(--rc-ink-body);
  margin-top: 0.75rem;
  font-weight: 500;
}

.rc-v3-clients-test-head { margin-bottom: 3rem; max-width: 780px; }
.rc-v3-clients-test-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .rc-v3-clients-test-grid { grid-template-columns: repeat(3, 1fr); } }
.rc-v3-glass-testimonial {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rc-radius-lg);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 8px 32px rgba(45, 53, 101, 0.08);
}
.rc-v3-glass-test-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  font-family: var(--rc-body);
  font-size: 0.7rem;
  color: var(--rc-ink-muted);
  font-weight: 500;
}
.rc-v3-glass-test-body {
  font-family: var(--rc-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--rc-ink-2);
  font-weight: 500;
  flex: 1;
}
.rc-v3-glass-test-attr { padding-top: 1rem; border-top: 1px solid var(--rc-line); }
.rc-v3-glass-test-name {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rc-navy);
  letter-spacing: -0.01em;
}
.rc-v3-glass-test-role {
  font-family: var(--rc-body);
  font-size: 0.82rem;
  color: var(--rc-ink-muted);
  margin-top: 2px;
}

/* ─── Academy: programme cards ───────────────────────────────────────── */
.rc-v3-prog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .rc-v3-prog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rc-v3-prog-grid { grid-template-columns: repeat(3, 1fr); } }

.rc-v3-prog-card {
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-lg);
  padding: 2rem;
  transition: all var(--rc-dur) var(--rc-ease);
}
.rc-v3-prog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(45, 53, 101, 0.10);
  border-color: var(--rc-line-strong);
}
.rc-v3-prog-card--placeholder {
  background: rgba(241, 245, 249, 0.6);
  border-style: dashed;
}
.rc-v3-prog-card--placeholder:hover { transform: none; box-shadow: none; }
.rc-v3-prog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--rc-radius-md);
  background: var(--rc-tint-1);
  color: var(--rc-navy);
  margin-bottom: 1.5rem;
}
.rc-v3-prog-title {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--rc-navy);
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.rc-v3-prog-desc {
  font-family: var(--rc-body);
  font-size: 0.92rem;
  color: var(--rc-ink-muted);
  line-height: 1.7;
}

/* Academy: format grid (dark) */
.rc-v3-format-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) { .rc-v3-format-grid { grid-template-columns: 1fr 2fr; gap: 4rem; } }
.rc-v3-format-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .rc-v3-format-cards { grid-template-columns: repeat(3, 1fr); } }
.rc-v3-format-card { padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.rc-v3-format-title {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.65rem;
  letter-spacing: -0.01em;
}
.rc-v3-format-desc {
  font-family: var(--rc-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

/* Academy: CTA */
.rc-v3-academy-cta { text-align: center; max-width: 640px; margin: 0 auto; }
.rc-v3-academy-cta .rc-v3-btn { margin-top: 2rem; }

/* ─── Blog: featured + post grid ─────────────────────────────────────── */
.rc-v3-featured-post {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  text-decoration: none;
  color: inherit;
  align-items: start;
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  transition: transform var(--rc-dur) var(--rc-ease);
}
.rc-v3-featured-post:hover { transform: translateY(-3px); }
@media (min-width: 1024px) { .rc-v3-featured-post { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.rc-v3-featured-img {
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(45, 53, 101, 0.18);
}
.rc-v3-featured-img img {
  width: 100%; height: 420px;
  object-fit: cover; display: block;
}
.rc-v3-featured-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--rc-navy), var(--rc-navy-2));
}
.rc-v3-featured-body { padding-top: 0.5rem; }
.rc-v3-featured-title {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  color: var(--rc-navy);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 1rem;
}

.rc-v3-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.rc-v3-post-cat {
  display: inline-flex;
  font-family: var(--rc-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rc-navy);
  background: rgba(45, 53, 101, 0.08);
  padding: 0.3rem 0.75rem;
  border-radius: var(--rc-radius-pill);
}
.rc-v3-post-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--rc-body);
  font-size: 0.82rem;
  color: var(--rc-ink-4);
}

.rc-v3-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) { .rc-v3-post-grid { grid-template-columns: repeat(2, 1fr); } }
.rc-v3-post-grid--three { gap: 1.5rem; }
@media (min-width: 768px) { .rc-v3-post-grid--three { grid-template-columns: repeat(3, 1fr); } }

.rc-v3-post-card {
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--rc-dur) var(--rc-ease), box-shadow var(--rc-dur) var(--rc-ease);
}
.rc-v3-post-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(45, 53, 101, 0.12); }
.rc-v3-post-img { height: 220px; overflow: hidden; background: linear-gradient(135deg, var(--rc-navy), var(--rc-navy-2)); }
.rc-v3-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-v3-post-body { padding: 1.85rem; }
.rc-v3-post-body .rc-v3-post-meta { margin-bottom: 1rem; }
.rc-v3-post-title {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--rc-navy);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: 0.85rem;
}
.rc-v3-post-excerpt {
  font-family: var(--rc-body);
  font-size: 0.9rem;
  color: var(--rc-ink-muted);
  line-height: 1.7;
}

/* Empty state */
.rc-v3-empty-state {
  max-width: 720px;
  border-left: 3px solid var(--rc-navy);
  padding: 0.5rem 0 0.5rem 1.5rem;
}

/* Newsletter */
.rc-v3-newsletter {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.rc-v3-newsletter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--rc-tint-1);
  color: var(--rc-navy);
  border-radius: 50%;
  margin-bottom: 1.5rem;
}
.rc-v3-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
  margin-top: 2rem;
}
.rc-v3-newsletter-form .rc-v3-btn { justify-content: center; }
.rc-v3-form-note {
  font-family: var(--rc-body);
  font-size: 0.78rem;
  color: var(--rc-ink-4);
  margin-top: 0.5rem;
  text-align: center;
  line-height: 1.6;
}
.rc-v3-form-note a { color: var(--rc-ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.rc-v3-newsletter-thanks {
  display: none;
  padding: 1.5rem;
  background: var(--rc-tint-1);
  border-radius: var(--rc-radius-md);
  margin-top: 1rem;
  text-align: left;
}
.rc-v3-thanks-title {
  font-family: var(--rc-display);
  font-weight: 700;
  color: var(--rc-navy);
  margin-bottom: 0.4rem;
}
.rc-v3-thanks-sub {
  font-family: var(--rc-body);
  font-size: 0.92rem;
  color: var(--rc-ink-muted);
}

/* ─── Contact ────────────────────────────────────────────────────────── */
.rc-v3-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) { .rc-v3-contact-grid { grid-template-columns: 1fr 2fr; gap: 5rem; } }
.rc-v3-contact-list { display: flex; flex-direction: column; gap: 1.75rem; }
.rc-v3-contact-row { display: flex; align-items: flex-start; gap: 1rem; }
.rc-v3-contact-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--rc-tint-1);
  color: var(--rc-navy);
  border-radius: var(--rc-radius-md);
}
.rc-v3-contact-row-lbl {
  font-family: var(--rc-body);
  font-size: 0.78rem;
  color: var(--rc-navy-3);
  font-weight: 500;
  margin-bottom: 4px;
}
.rc-v3-contact-row-val {
  font-family: var(--rc-body);
  font-size: 0.95rem;
  color: var(--rc-ink-2);
  font-weight: 500;
  text-decoration: none;
}
a.rc-v3-contact-row-val:hover { color: var(--rc-navy); }
.rc-v3-contact-row-sub { color: var(--rc-ink-4); font-weight: 400; }
.rc-v3-contact-coverage { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rc-line); }

.rc-v3-form-frame {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(45, 53, 101, 0.06);
}
.rc-v3-form { display: flex; flex-direction: column; gap: 1.25rem; }
.rc-v3-form-error {
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  font-family: var(--rc-body);
  font-size: 0.88rem;
  border-radius: var(--rc-radius-sm);
}
.rc-v3-form-error-ico { flex-shrink: 0; margin-top: 2px; }
.rc-v3-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) { .rc-v3-form-row { grid-template-columns: 1fr 1fr; } }
.rc-v3-field { display: flex; flex-direction: column; gap: 0.4rem; }
.rc-v3-label {
  font-family: var(--rc-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rc-navy);
  letter-spacing: -0.005em;
}
.rc-v3-input,
.rc-v3-select,
.rc-v3-textarea {
  font-family: var(--rc-body);
  font-size: 0.95rem;
  color: var(--rc-ink);
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-sm);
  padding: 0.85rem 1rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--rc-dur-fast) var(--rc-ease), box-shadow var(--rc-dur-fast) var(--rc-ease);
}
.rc-v3-input:focus,
.rc-v3-select:focus,
.rc-v3-textarea:focus {
  border-color: var(--rc-navy);
  box-shadow: 0 0 0 3px rgba(45, 53, 101, 0.12);
}
.rc-v3-textarea { resize: vertical; min-height: 140px; }
.rc-v3-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--rc-navy-3) 50%), linear-gradient(135deg, var(--rc-navy-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.rc-v3-form-success {
  display: none;
  padding: 2.5rem;
  text-align: center;
  background: var(--rc-tint-1);
  border-radius: var(--rc-radius-lg);
}
.rc-v3-form-success-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--rc-navy);
  color: #fff;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
}

/* ─── Single post: article body + author + hero img ──────────────────── */
.rc-v3-article-head { max-width: 800px; }
.rc-v3-article-hero-img {
  padding: 0;
  background: transparent;
}
.rc-v3-article-hero-img-frame {
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(45, 53, 101, 0.20);
  transform: translateY(-3rem);
}
.rc-v3-article-hero-img-frame img {
  width: 100%; height: auto;
  max-height: 560px;
  object-fit: cover;
  display: block;
}

.rc-v3-article-body {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--rc-body);
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--rc-ink-body);
}
.rc-v3-article-body h2 {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  color: var(--rc-navy);
  margin: 2.75rem 0 1rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rc-v3-article-body h3 {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--rc-navy);
  margin: 2.25rem 0 0.85rem;
  letter-spacing: -0.015em;
}
.rc-v3-article-body p { margin-bottom: 1.4rem; }
.rc-v3-article-body a {
  color: var(--rc-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.rc-v3-article-body a:hover { color: var(--rc-navy-2); }
.rc-v3-article-body ul,
.rc-v3-article-body ol { padding-left: 1.5rem; margin-bottom: 1.4rem; }
.rc-v3-article-body li { margin-bottom: 0.5rem; }
.rc-v3-article-body blockquote {
  border-left: 3px solid var(--rc-navy);
  padding: 0.5rem 0 0.5rem 1.75rem;
  margin: 2rem 0;
  font-family: var(--rc-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--rc-navy);
  font-weight: 500;
  line-height: 1.5;
}
.rc-v3-article-body img { border-radius: var(--rc-radius-md); margin: 2rem 0; max-width: 100%; }
.rc-v3-article-body code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--rc-tint-2);
  padding: 0.12em 0.45em;
  border-radius: 3px;
}

.rc-v3-author-block {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 0;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
}
.rc-v3-author-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rc-navy), var(--rc-navy-2));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}
.rc-v3-author-name {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--rc-navy);
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}
.rc-v3-author-role {
  font-family: var(--rc-body);
  font-size: 0.88rem;
  color: var(--rc-ink-muted);
}

/* ─── Real client logo images inside the placeholder containers ──────── */
/* Logos are mixed aspect ratios + brand colors. Centering them with
   object-fit:contain + a sensible max-height gives every brand room to
   breathe regardless of source aspect. White card background gives dark
   colored logos something to sit on. */
.rc-v3-logo img,
.rc-v3-clients-logo img {
  max-width: 75%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--rc-dur) var(--rc-ease);
}
.rc-v3-logo:hover img,
.rc-v3-clients-logo:hover img {
  transform: scale(1.04);
}

/* Bigger height for clients page since it's the showcase */
.rc-v3-clients-logo {
  height: 90px;
}
.rc-v3-clients-logo:hover img { transform: scale(1.04); }

/* Logo in the home testimonial card (replaces gradient circle avatar) */
.rc-v3-testimonial-logo {
  max-height: 36px;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Logo on each clients-page testimonial card */
.rc-v3-glass-test-logo {
  padding: 0.5rem 0;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-v3-glass-test-logo img {
  max-height: 52px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
/* Stagger reveal across each row of testimonials */
.rc-v3-glass-testimonial {
  transition: opacity 0.7s var(--rc-ease-out), transform 0.7s var(--rc-ease-out);
  transition-delay: calc(var(--rc-stagger, 0) * 0.14s);
}

/* ─── About: Media Advisory Practice + Sessions in Action ───────────── */
/* Two-image block matching the screenshot layout: left = solo portrait
   with "MEDIA ADVISORY PRACTICE" caption overlay, right = 2x2 collage
   with "ADVISORY SESSIONS IN ACTION" caption overlay. Both at the same
   visual height so the row reads as paired. */
.rc-v3-advisory-block {
  padding: clamp(64px, 8vw, 96px) 0;
  background: transparent;
}
.rc-v3-advisory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .rc-v3-advisory-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.rc-v3-advisory-cell {
  position: relative;
  margin: 0;
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(45, 53, 101, 0.10);
  background: var(--rc-navy);
}
.rc-v3-advisory-cell img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 520px;
  object-fit: cover;
}
.rc-v3-advisory-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.2rem 1.5rem;
  font-family: var(--rc-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(20, 27, 64, 0.78) 0%, rgba(20, 27, 64, 0.45) 60%, transparent 100%);
}

/* ─── Equal-size client logos (addresses "trebaju biti istih veličina") ─ */
/* All logo tiles render at the same fixed height with the same internal
   padding so brand marks read as a coherent grid regardless of source
   aspect ratio. */
.rc-v3-logo,
.rc-v3-clients-logo {
  /* No background, no border, no card. Logos sit directly on the page
     mist. Spacing-only padding so adjacent logos don't crowd each other. */
  padding: 1rem 1.25rem;
}
.rc-v3-logo {
  height: 110px;
}
.rc-v3-clients-logo {
  height: 130px;
}
.rc-v3-logo img,
.rc-v3-clients-logo img {
  /* Cap to a fraction so wide logos (Zalando, AutoWallis) don't fill
     the cell width, and square/tall logos (4iG, Hyundai, Knoppers,
     Merci) get enough size to read. */
  max-width: 78%;
  max-height: 68%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ─── Cycle section header (services page) ───────────────────────────── */
.rc-v3-cycle-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}
.rc-v3-cycle-head .rc-v3-helper {
  justify-content: center;
  margin-bottom: 1rem;
}
.rc-v3-cycle-head .rc-v3-section-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
}
.rc-v3-cycle-head .rc-v3-prose-muted {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ─── Logo marquee (home page) ───────────────────────────────────────── */
/* Continuous horizontal scroll. The track contains two identical sets of
   logos; we slide the whole track by -50% of its width over the duration,
   so the moment the second set finishes scrolling into view, we snap back
   to the start of the first set — invisibly. Gradient masks on left/right
   edges fade the logos in/out of view. */
.rc-v3-marquee {
  position: relative;
  overflow: hidden;
  padding: 2rem 0 3rem;
  /* Soft edge fade so logos enter/exit without a hard cut */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
.rc-v3-marquee-track {
  display: flex;
  width: max-content;
  animation: rcMarquee 60s linear infinite;
}
.rc-v3-marquee:hover .rc-v3-marquee-track {
  animation-play-state: paused;
}
.rc-v3-marquee-set {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding-right: 4rem;
  flex-shrink: 0;
}
.rc-v3-marquee-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 110px;
  /* No background — logos sit directly on the page mist as they scroll. */
  /* No horizontal padding: spacing between logos is governed entirely by
     the parent's `gap`, so the loop seam (last logo → first logo) matches
     every other inter-logo gap exactly. */
  border-radius: var(--rc-radius-md);
  padding: 1.25rem 0;
  flex-shrink: 0;
}
.rc-v3-marquee-cell img {
  /* Cap to a fraction of cell so logos with wide aspect (Zalando,
     AutoWallis) don't dominate, and square logos (4iG, Hyundai)
     don't shrink to a postage stamp. Heuristic: limit BOTH width and
     height to ~70-80% of cell, then object-fit centers. */
  max-width: 80%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@keyframes rcMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-v3-marquee-track { animation: none; }
}

/* ─── Home pull-quote testimonial (Marina-style) ─────────────────────── */
.rc-v3-pullquote-block {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 4rem) 0;
  text-align: center;
}
.rc-v3-pullquote-block .rc-v3-pullquote {
  font-family: var(--rc-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.5;
  color: var(--rc-navy);
  letter-spacing: -0.01em;
  margin: 0 auto 2rem;
  /* Reading measure: 56ch keeps short quotes punchy but lets long
     testimonials breathe across ~8-10 lines instead of forcing them
     into a tall narrow ribbon. */
  max-width: 56ch;
  text-align: center;
}
.rc-v3-pullquote-attr {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rc-line);
}
.rc-v3-pullquote-logo {
  max-height: 56px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.rc-v3-pullquote-author {
  font-family: var(--rc-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-style: italic;
  letter-spacing: 0;
  color: var(--rc-navy);
  margin: 1.5rem 0 0;
  max-width: 56ch;
  line-height: 1.4;
}
.rc-v3-pullquote-author::before {
  content: '— ';
  color: var(--rc-navy-3);
  font-style: normal;
}
.rc-v3-pullquote-author strong {
  font-weight: 600;
  color: var(--rc-navy);
}

/* ─── REA360 Continuous Cycle wheel (about page) ─────────────────────── */
/* A circular framework diagram: 4 named stages around a central REA360
   hub, with dashed circular guide + arrow segments between stages. The
   ring of stages rotates very slowly (90s/turn) so it reads as living,
   stage cards counter-rotate so their text stays upright, and the central
   REA360 hub sits outside the ring so it stays completely stationary. */
.rc-v3-cycle-wheel {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.rc-v3-cycle-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: rcRingRotate 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rc-v3-cycle-ring { animation: none; }
}
@keyframes rcRingRotate {
  to { transform: rotate(360deg); }
}
.rc-v3-cycle-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.rc-v3-cycle-stage {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  background: #fff;
  border: 2px solid var(--stage-color, var(--rc-navy));
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(45, 53, 101, 0.18);
  transform-origin: center;
  /* Counter-rotate so text stays upright as the parent ring spins */
  animation: rcStageUpright 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rc-v3-cycle-stage { animation: none; }
}
@keyframes rcStageUpright {
  to { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(-360deg); }
}
.rc-v3-cycle-stage--n { top: 0;            left: 50%; --tx: -50%; --ty: 0; }
.rc-v3-cycle-stage--e { top: 50%;          right: 0;  --tx: 0;    --ty: -50%; left: auto; }
.rc-v3-cycle-stage--s { bottom: 0;         left: 50%; --tx: -50%; --ty: 0; top: auto; }
.rc-v3-cycle-stage--w { top: 50%;          left: 0;   --tx: 0;    --ty: -50%; }

/* Apply the translate offset to the resting state too so positioning
   is stable when the animation pauses (or for reduced-motion users). */
.rc-v3-cycle-stage--n { transform: translate(-50%, 0); }
.rc-v3-cycle-stage--e { transform: translate(0, -50%); }
.rc-v3-cycle-stage--s { transform: translate(-50%, 0); }
.rc-v3-cycle-stage--w { transform: translate(0, -50%); }

.rc-v3-cycle-step {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--stage-color, var(--rc-navy));
  opacity: 0.6;
}
.rc-v3-cycle-label {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--stage-color, var(--rc-navy));
  letter-spacing: -0.01em;
  margin-top: 2px;
  text-align: center;
  line-height: 1.1;
}
.rc-v3-cycle-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, var(--rc-navy), var(--rc-navy-2));
  border-radius: 50%;
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 32px rgba(45, 53, 101, 0.30);
}
.rc-v3-cycle-hub-name {
  font-family: var(--rc-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.rc-v3-cycle-hub-name strong { font-weight: 800; }
.rc-v3-cycle-hub-sub {
  font-family: var(--rc-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.4rem;
  padding: 0 0.5rem;
  line-height: 1.3;
}

/* ─── Clients grid tile stagger reveal ───────────────────────────────── */
.rc-v3-clients-logo {
  transition: opacity 0.6s var(--rc-ease-out), transform 0.6s var(--rc-ease-out);
  transition-delay: calc(var(--rc-stagger, 0) * 0.08s);
}

/* ─── Home: static 5-logo row (no marquee, randomized per page load) ──── */
.rc-v3-logo-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin: 2rem 0 4rem;
}
@media (max-width: 768px) {
  /* On mobile, 5-across becomes too cramped; drop to 3 visible with the
     remaining two wrapping to a second row. */
  .rc-v3-logo-row { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
  .rc-v3-logo-row { grid-template-columns: repeat(2, 1fr); }
}
.rc-v3-logo-row-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  /* No background, no border, no card — logos sit directly on the page mist. */
  padding: 1.25rem 1.5rem;
}
.rc-v3-logo-row-cell img {
  max-width: 78%;
  max-height: 68%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ─── Home: testimonial slider (2 quotes, auto-advance) ───────────────── */
.rc-v3-testimonial-slider {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 0 0.5rem;
}
.rc-v3-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.6s var(--rc-ease);
}
.rc-v3-slide.is-active {
  display: block;
  opacity: 1;
  animation: rcSlideFadeIn 0.6s var(--rc-ease);
}
@keyframes rcSlideFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-v3-slide.is-active { animation: none; }
}

.rc-v3-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.rc-v3-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(45, 53, 101, 0.22);
  padding: 0;
  cursor: pointer;
  transition: background var(--rc-dur-fast) var(--rc-ease), transform var(--rc-dur-fast) var(--rc-ease);
}
.rc-v3-slider-dot:hover {
  background: rgba(45, 53, 101, 0.5);
  transform: scale(1.15);
}
.rc-v3-slider-dot.is-active {
  background: var(--rc-navy);
  transform: scale(1.2);
}

/* ─── Case-study sub-section heading (Challenge / Approach / Impact) ───── */
.rc-v3-case-block-title {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--rc-navy);
  margin: 0 0 1rem;
  line-height: 1.25;
}

/* ─── Case-study industry label (sidebar) ──────────────────────────────── */
.rc-v3-case-industry {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  color: var(--rc-navy);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

/* ─── Founder name on home (meet the founder) ──────────────────────────── */
/* Smaller than the global section-title — not the page hero. */
.rc-v3-founder-headline {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 1rem 0 0.5rem;
  color: var(--rc-navy);
}

/* ─── Dark CTA portrait modifier ──────────────────────────────────────── */
/* Marina's portrait fades in from the right edge of the dark CTA, low
   opacity so the gradient + headline stay dominant. Hides on mobile. */
.rc-v3-cta--portrait::after,
.rc-v3-cta-band--portrait::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  max-width: 600px;
  background-image: var(--rc-cta-portrait, none);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 30%, transparent 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.rc-v3-cta--portrait > *,
.rc-v3-cta-band--portrait > * { position: relative; z-index: 1; }
@media (max-width: 768px) {
  /* On mobile the portrait moves to a bottom strip (the side fade reads
     awkwardly in a narrow column). Marina's image stays visible, the
     block feels less like a solid slab of navy. */
  .rc-v3-cta--portrait::after,
  .rc-v3-cta-band--portrait::after {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 42%;
    background-position: center 25%;
    opacity: 0.18;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 20%, transparent 100%);
            mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 20%, transparent 100%);
  }
  /* Trim the dark CTA height on mobile so it doesn't dominate the screen */
  .rc-v3-cta--portrait,
  .rc-v3-cta-band--portrait {
    padding-top: clamp(56px, 12vw, 80px);
    padding-bottom: clamp(56px, 12vw, 80px);
  }
}

/* ─── Blog: Coming Soon section ──────────────────────────────────────── */
/* Visual treatment for unpublished teasers. No image area (they don't
   have featured images), no link wrapper, no hover lift — these are
   announcements, not actionable cards. Tone is paler than published
   cards so they read as "queued for later" without competing for
   attention with the real published articles above. */
.rc-v3-coming-soon-sec { background: transparent; }
.rc-v3-post-card--soon {
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed var(--rc-line);
  border-radius: var(--rc-radius-md);
  padding: 1.75rem 1.75rem 2rem;
  cursor: default;
  transition: none;
  display: block;
}
.rc-v3-post-card--soon:hover {
  transform: none;
  box-shadow: none;
}
.rc-v3-post-card--soon .rc-v3-post-title {
  color: var(--rc-ink-2);
}
.rc-v3-post-card--soon .rc-v3-post-excerpt {
  color: var(--rc-ink-muted);
}
.rc-v3-post-meta-item--soon {
  color: var(--rc-navy);
  font-weight: 600;
}

/* ─── About page: staggered reveal for country pills + team rows ──────── */
/* More pronounced than the default reveal so the animation is visibly
   distinct rather than a subtle fade. Each pill enters from below with
   a noticeable jump in scale, staggered so the row reads as a wave. */
.rc-v3-country-pill.rc-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.85);
  transition: opacity 0.7s var(--rc-ease-out), transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: calc(var(--rc-stagger, 0) * 0.12s);
}
.rc-v3-country-pill.rc-reveal.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.rc-v3-team-row.rc-reveal {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.8s var(--rc-ease-out), transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1);
  transition-delay: calc(var(--rc-stagger, 0) * 0.18s);
}
.rc-v3-team-row.rc-reveal.is-in {
  opacity: 1;
  transform: translateX(0);
}

/* ─── About process timeline numbers: pop-in animation ────────────────── */
/* When a timeline step reveals, the number circle scales from 0 → 1 with
   a strong overshoot, so the 01/02/03/04/05 sequence reads like a count
   appearing one after another. Made more pronounced per Marina's
   feedback that the animation was too subtle. */
.rc-v3-timeline-dot {
  transform: scale(0) rotate(-12deg);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.34, 1.7, 0.5, 1), opacity 0.5s var(--rc-ease-out);
  transition-delay: calc(var(--rc-stagger, 0) * 0.25s + 0.2s);
}
.rc-v3-timeline-step.is-in .rc-v3-timeline-dot {
  transform: scale(1) rotate(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .rc-v3-timeline-dot {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ─── Clients page: testimonials horizontal carousel ──────────────────── */
.rc-v3-test-carousel {
  position: relative;
  margin-top: 1rem;
}
.rc-v3-test-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0 2rem;
  /* Hide scrollbar — controls below give navigation cues */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rc-v3-test-track::-webkit-scrollbar { display: none; }

.rc-v3-test-slide {
  flex: 0 0 calc(100% - 2rem);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .rc-v3-test-slide {
    flex: 0 0 720px;
  }
}

.rc-v3-test-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.rc-v3-test-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rc-line);
  background: rgba(255, 255, 255, 0.85);
  color: var(--rc-navy);
  cursor: pointer;
  transition: all var(--rc-dur-fast) var(--rc-ease);
}
.rc-v3-test-arrow:hover {
  background: var(--rc-navy);
  color: #fff;
  border-color: var(--rc-navy);
  transform: translateY(-1px);
}
.rc-v3-test-dots {
  display: flex;
  gap: 0.5rem;
}
.rc-v3-test-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(45, 53, 101, 0.22);
  padding: 0;
  cursor: pointer;
  transition: background var(--rc-dur-fast) var(--rc-ease), transform var(--rc-dur-fast) var(--rc-ease);
}
.rc-v3-test-dot:hover {
  background: rgba(45, 53, 101, 0.5);
  transform: scale(1.15);
}
.rc-v3-test-dot.is-active {
  background: var(--rc-navy);
  transform: scale(1.2);
}

/* ─── Service-block subtitle (Support to Select…, Continuous Insight…) ── */
/* Marina asked for these to be visibly bigger than the helper-text style
   they were using. They sit below the H2 title and read as a descriptive
   tagline. */
.rc-v3-svc-subtitle {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.3;
  color: var(--rc-navy-2);
  letter-spacing: -0.015em;
  margin: 0.85rem 0 0;
}

/* ─── Per-logo size overrides ─────────────────────────────────────────── */
/* Some client logos have narrow or low-density artwork that reads as
   visually weaker than peers when constrained to the same cell. Override
   the global 78%/68% caps so these specific marks fill more of the cell
   and reach optical parity with the bolder logos (e.g. AutoWallis, BIPA,
   MOL). Applies in both the home marquee and the clients-page grid. */
/* Group 1 — replaced with clean, tightly-cropped high-res files (v2.9.4).
   These have little internal whitespace, so they only need a modest cap
   to sit proportionally with neighbours. (Previously over-sized at 95/88.) */
.rc-v3-logo img[src*="merci"],
.rc-v3-clients-logo img[src*="merci"],
.rc-v3-marquee-cell img[src*="merci"],
.rc-v3-logo img[src*="knoppers"],
.rc-v3-clients-logo img[src*="knoppers"],
.rc-v3-marquee-cell img[src*="knoppers"],
.rc-v3-logo img[src*="drmax"],
.rc-v3-clients-logo img[src*="drmax"],
.rc-v3-marquee-cell img[src*="drmax"] {
  max-width: 74%;
  max-height: 64%;
}
/* Group 2 — still the original low-res files with baked-in whitespace.
   They need a larger cap to reach the same optical weight. Replace these
   with clean originals later and move them to Group 1. */
.rc-v3-logo img[src*="bahlsen"],
.rc-v3-clients-logo img[src*="bahlsen"],
.rc-v3-marquee-cell img[src*="bahlsen"],
.rc-v3-logo img[src*="jaguar"],
.rc-v3-clients-logo img[src*="jaguar"],
.rc-v3-marquee-cell img[src*="jaguar"],
.rc-v3-logo img[src*="toffifee"],
.rc-v3-clients-logo img[src*="toffifee"],
.rc-v3-marquee-cell img[src*="toffifee"] {
  max-width: 95%;
  max-height: 88%;
}

/* Mark for the Dr Max logo on the home testimonial card — bigger
   than other testimonial logos because the source artwork is thin
   and was reading too small even at 56px. */
.rc-v3-pullquote-logo[src*="drmax"] {
  max-height: 64px;
  max-width: 180px;
}

/* ─── Testimonial continuous marquee (clients page) ───────────────────── */
/* Per Marina's feedback referencing advise-mc.com — testimonials should
   flow continuously past, not paginate. Slow speed so visitors can read
   while passing. Hover anywhere pauses the entire flow. No controls. */
.rc-v3-test-marquee {
  position: relative;
  overflow: hidden;
  margin: 1.5rem 0 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rc-v3-test-marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: rcTestMarquee 70s linear infinite;
  will-change: transform;
}
.rc-v3-test-marquee:hover .rc-v3-test-marquee-track {
  animation-play-state: paused;
}
.rc-v3-test-marquee-card {
  flex: 0 0 auto;
  width: 540px;
  max-width: 90vw;
}
@keyframes rcTestMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-v3-test-marquee-track { animation: none; }
}

/* ═══ Premium polish layer (v2.9.1) ═══════════════════════════════════ */

/* ── Image wipe reveals ──────────────────────────────────────────────── */
/* Images reveal with a clip-path wipe from left when scrolled into view.
   Class applied at runtime by polish.js so templates stay untouched.
   Slight scale settle adds an editorial, considered feel. */
/* Image wipe reveal — progressive enhancement.
   IMPORTANT: the hidden (clipped) state is applied ONLY when JS has armed
   the element with .rc-img-wipe-armed. The base .rc-img-wipe class does
   nothing on its own, so if JS fails to run, is slow, or the browser
   behaves unexpectedly, the image is simply visible — never stuck hidden.
   This is the fix for environments where images "don't open". */
.rc-img-wipe {
  /* no visual change by itself — see .rc-img-wipe-armed */
}
.rc-img-wipe-armed {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
  transition:
    clip-path 1s cubic-bezier(0.65, 0, 0.35, 1),
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.rc-img-wipe-armed.is-wiped {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .rc-img-wipe {
    clip-path: none;
    transform: none;
    transition: none;
  }
}

/* ── Animated link underlines ────────────────────────────────────────── */
/* Nav and footer links draw their underline from the left on hover
   instead of an instant style change. Excludes buttons. */
.primary-nav .nav-link,
.site-footer nav a {
  position: relative;
  text-decoration: none;
}
.primary-nav .nav-link::after,
.site-footer nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.primary-nav .nav-link:hover::after,
.primary-nav .nav-link:focus-visible::after,
.site-footer nav a:hover::after,
.site-footer nav a:focus-visible::after {
  transform: scaleX(1);
}
/* Current-page nav item keeps a steady underline */
.primary-nav .nav-link.is-active::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav .nav-link::after,
  .site-footer nav a::after { transition: none; }
}

/* ── Magnetic button smoothing ───────────────────────────────────────── */
/* JS sets translate() directly on mousemove; this transition smooths the
   return-to-rest on mouseleave and the initial attraction. Buttons keep
   their existing hover styles (color, shadow) — only transform is added. */
.rc-v3-btn {
  transition-property: transform, background, color, border-color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
  will-change: transform;
}
/* Arrow icon nudges right on hover for directional affordance */
.rc-v3-btn svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rc-v3-btn:hover svg {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .rc-v3-btn, .rc-v3-btn svg { transition: none; }
}

/* ── Hero visual parallax compositing hint ───────────────────────────── */
.rc-v3-hero-right {
  will-change: transform;
}

/* ─── Service "Key Deliverables" subheading ───────────────────────────── */
.rc-v3-svc-deliv-title {
  font-family: var(--rc-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--rc-navy);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ═══ Home: How We Deliver section ════════════════════════════════════ */
.rc-v3-deliver {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--rc-bg);
}
.rc-v3-deliver-head {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.rc-v3-deliver-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.rc-v3-deliver-box {
  position: relative;
  background: linear-gradient(160deg, var(--rc-tint-1) 0%, #fff 100%);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-lg);
  padding: 2.25rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  transition: transform 0.4s var(--rc-ease), box-shadow 0.4s var(--rc-ease), border-color 0.4s var(--rc-ease);
}
/* Navy accent bar along the top edge — ties the boxes to the brand and
   removes the stark all-white look. */
.rc-v3-deliver-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rc-navy) 0%, var(--rc-navy-3) 100%);
  opacity: 0.85;
}
.rc-v3-deliver-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -22px rgba(45, 53, 101, 0.42);
  border-color: var(--rc-navy-3);
}
.rc-v3-deliver-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--rc-navy);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(45, 53, 101, 0.55);
}
.rc-v3-deliver-box-title {
  font-family: var(--rc-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  color: var(--rc-navy);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.rc-v3-deliver-box-text {
  font-family: var(--rc-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--rc-ink-2);
  margin: 0;
}
/* Staggered reveal — reuses the global .rc-reveal + --rc-stagger pattern */
.rc-v3-deliver-box.rc-reveal {
  transition: opacity 0.7s var(--rc-ease-out), transform 0.7s var(--rc-ease-out);
  transition-delay: calc(var(--rc-stagger, 0) * 0.1s);
}

@media (max-width: 900px) {
  .rc-v3-deliver-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rc-v3-deliver-grid { grid-template-columns: 1fr; }
}