/* FlexiSAF-inspired presentation layer, adapted to the R-Ignite brand. */
:root {
  --ri-navy: #011742;
  --ri-navy-soft: #253858;
  --ri-burgundy: #8b143b;
  --ri-burgundy-deep: #6f0e2e;
  --ri-burgundy-soft: #f8e9ee;
  --ri-paper: #ffffff;
  --ri-surface: #ffffff;
  --ri-soft: #f8f8f8;
  --ri-cream: #fbf8f9;
  --ri-text: #011742;
  --ri-muted: #4f596b;
  --ri-line: #e3e6ec;
  --ri-line-strong: #cfd4de;
  --ri-shadow: 0 20px 54px rgba(1, 23, 66, .08);
  --ri-radius: 12px;
  --ri-max: 1180px;
  --uc-black: var(--ri-navy);
  --uc-ink: var(--ri-text);
  --uc-paper: var(--ri-paper);
  --uc-red: var(--ri-burgundy);
  --uc-burgundy: var(--ri-burgundy);
  --uc-grey: var(--ri-muted);
  --uc-line: var(--ri-line);
  --uc-line-dark: var(--ri-line-strong);
  --uc-display: Inter, "Plus Jakarta Sans", system-ui, sans-serif;
  --uc-body: Inter, "Plus Jakarta Sans", system-ui, sans-serif;
}

html {
  background: var(--ri-paper);
}

body,
body.contact-page {
  color: var(--ri-text);
  background: var(--ri-paper) !important;
  font-family: var(--uc-body);
}

p {
  color: var(--ri-muted);
  font-size: 1rem;
  line-height: 1.75;
}

/* Keep the current R-Ignite navigation structure, with FlexiSAF's spacious treatment. */
nav,
nav.scrolled {
  height: 92px;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  background: rgba(255, 255, 255, .98) !important;
  border-bottom: 1px solid var(--ri-line) !important;
}

.logo img {
  width: 145px;
}

.nav-links {
  gap: clamp(1.5rem, 3vw, 2.7rem);
}

.nav-links a {
  color: var(--ri-navy);
  font-size: .88rem;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ri-burgundy);
}

.nav-cta {
  min-height: 52px;
  padding-inline: 1.55rem;
  color: #fceff4;
  background: var(--ri-burgundy);
  border: 1px solid var(--ri-burgundy);
  border-radius: 12px;
  font-size: .86rem;
  font-weight: 600;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  color: #fceff4;
  background: var(--ri-burgundy-deep);
  border-color: var(--ri-burgundy-deep);
  transform: translateY(-2px);
}

.nav-progress {
  background: var(--ri-burgundy);
}

/* Hero scale and neutral background mirror the reference without its circular artwork. */
.hero {
  padding: clamp(9.5rem, 13vw, 12rem) var(--ri-pad) clamp(5rem, 8vw, 7rem);
  background: var(--ri-soft) !important;
  border-bottom: 1px solid var(--ri-line);
}

.hero-inner {
  max-width: 1100px;
  gap: 3.5rem;
}

.hero-copy {
  max-width: 980px;
}

.hero-copy h1 {
  max-width: 13ch;
  color: var(--ri-navy);
  font-size: clamp(3.15rem, 5.5vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .98;
}

.hero-copy h1 em,
.page-title .accent,
.page-title em,
.accent {
  color: var(--ri-burgundy) !important;
}

.hero-kicker,
.eyebrow,
.section-label,
.service-stage,
.founder-role {
  color: var(--ri-burgundy);
  font-family: var(--uc-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.hero-meta {
  max-width: 740px;
  color: var(--ri-muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.8;
}

.hero-actions {
  gap: .75rem;
}

.hero .btn-primary,
.closing-card .btn-primary,
.services-cta-card .btn-primary,
.btn-dark,
.btn-submit {
  min-height: 56px;
  padding-inline: 1.65rem;
  color: #fceff4;
  background: var(--ri-burgundy);
  border: 1px solid var(--ri-burgundy);
  border-radius: 12px;
  font-weight: 600;
}

.hero .btn-primary:hover,
.closing-card .btn-primary:hover,
.services-cta-card .btn-primary:hover,
.btn-submit:hover:not(:disabled) {
  color: #fceff4;
  background: var(--ri-burgundy-deep);
  border-color: var(--ri-burgundy-deep);
  transform: translateY(-2px);
}

.hero .btn-outline {
  min-height: 56px;
  padding-inline: 1.65rem;
  color: var(--ri-navy);
  background: var(--ri-surface);
  border: 1px solid var(--ri-navy);
  border-radius: 12px;
}

.hero .btn-outline:hover {
  color: var(--ri-burgundy);
  background: var(--ri-burgundy-soft);
  border-color: var(--ri-burgundy);
}

.page-hero,
body:not(.contact-page) .page-hero,
body.contact-page .page-hero {
  min-height: clamp(430px, 60vh, 610px);
  padding: clamp(10rem, 15vw, 12rem) var(--ri-pad) clamp(5rem, 8vw, 7rem);
  color: var(--ri-navy);
  background: var(--ri-soft) !important;
  border-bottom: 1px solid var(--ri-line);
}

.page-title {
  max-width: 17ch;
  color: var(--ri-navy);
  font-size: clamp(3rem, 5.8vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: 1;
}

.interactive-masthead {
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent calc(var(--masthead-x) - 14%),
      rgba(139, 20, 59, .05) var(--masthead-x),
      transparent calc(var(--masthead-x) + 14%),
      transparent 100%),
    var(--ri-soft) !important;
}

/* Spacious, product-like sections. */
.section-shell,
.about-main,
.team-intro,
.founders,
.simple-main,
.services-intro,
.services-flow,
.services-cta,
.stages-section,
.outcomes,
.timeline-section,
.market-section,
.strategy-main,
.positioning,
.revenue,
.contact-layout,
.signal-band,
.system-story {
  padding-top: clamp(5.5rem, 9vw, 8rem);
  padding-bottom: clamp(5.5rem, 9vw, 8rem);
  background: var(--ri-paper) !important;
}

.section-title,
.founders-heading,
.services-cta-card h2,
.closing-card h2,
.system-story-header h2 {
  color: var(--ri-navy) !important;
  font-size: clamp(2.35rem, 4.5vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.03;
}

.surface-card,
.section-block,
.vision-card,
.industries-copy,
.trust-copy,
.founder-card,
.simple-card,
.market-card,
.pos-card,
.outcome-cell,
.rev-cell,
.service-full,
.system-visual,
.closing-card,
.services-cta-card,
body.contact-page .info-panel,
body.contact-page .form-wrap {
  color: var(--ri-navy);
  background: var(--ri-surface) !important;
  border: 1px solid var(--ri-line-strong) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.surface-card:hover,
.service-full:hover,
.founder-card:hover,
.market-card:hover,
.pos-card:hover {
  border-color: var(--ri-burgundy) !important;
  box-shadow: var(--ri-shadow) !important;
}

/* Homepage: alternating product sections inspired by FlexiSAF's feature rhythm. */
.system-story {
  background: var(--ri-paper) !important;
}

.system-story-header {
  border-bottom: 0;
}

.system-visual {
  background: var(--ri-soft) !important;
  border-color: var(--ri-navy) !important;
}

.system-steps {
  background: var(--ri-line);
  border: 1px solid var(--ri-line);
  border-radius: 12px;
  overflow: hidden;
}

.story-step,
.story-step:hover,
.story-step:focus-visible,
.story-step.is-active {
  color: var(--ri-navy);
  background: var(--ri-surface);
}

.story-step.is-active {
  box-shadow: inset 4px 0 0 var(--ri-burgundy);
}

.signal-band {
  background: var(--ri-burgundy-soft) !important;
}

.signal-band-inner {
  background: var(--ri-surface);
  border: 1px solid var(--ri-burgundy);
  border-radius: 12px;
}

.pillar-card,
.pillar-card:nth-child(2n) {
  min-height: 400px;
  padding: clamp(1.8rem, 3.8vw, 3rem);
  color: var(--ri-navy);
  background: var(--ri-surface) !important;
  border: 1px solid var(--ri-line-strong) !important;
  border-radius: 12px !important;
}

.pillar-card:nth-child(2),
.pillar-card:nth-child(3) {
  background: var(--ri-soft) !important;
}

.pillar-card h3,
.service-right h3,
.founder-name,
.vision-card h3,
.section-block h2 {
  color: var(--ri-navy) !important;
  font-weight: 600;
}

.closing-card,
.services-cta-card {
  padding: clamp(3rem, 6vw, 5rem);
  background: var(--ri-burgundy-soft) !important;
  border-color: #d9aebe !important;
}

/* About, services, and team retain their enhanced interactions. */
.about-experience {
  background: var(--ri-paper) !important;
  overflow: visible !important;
  content-visibility: visible;
  contain: none;
}

@media (min-width: 981px) {
  .about-experience-layout {
    align-items: stretch;
  }

  .about-explorer {
    position: sticky;
    top: 116px;
    z-index: 3;
    align-self: start;
    height: max-content;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.about-explorer-link:hover,
.about-explorer-link:focus-visible,
.about-explorer-link.is-active,
.service-explorer-link:hover,
.service-explorer-link:focus-visible,
.service-explorer-link.is-active,
.team-explorer-link:hover,
.team-explorer-link:focus-visible,
.team-explorer-link.is-active {
  color: var(--ri-navy);
  background: var(--ri-burgundy-soft);
  border-color: #d9aebe;
}

.overview-grid,
.vision-grid,
.industries-grid,
.founders-grid {
  gap: 1.25rem;
}

.overview-grid .section-block h2 {
  font-size: clamp(2rem, 3.4vw, 3.55rem);
  line-height: 1.06;
}

.vision-card,
.industries-copy,
.trust-copy {
  min-height: 330px;
}

.service-explorer {
  top: 92px;
  background: rgba(255, 255, 255, .96);
}

.service-explorer-link {
  min-height: 70px;
}

.service-full {
  border-color: var(--ri-navy) !important;
}

.service-full:nth-child(even) .service-left {
  background: var(--ri-burgundy-soft);
}

.service-left {
  background: var(--ri-soft);
  border-color: var(--ri-line-strong);
}

.service-card,
.service-card + .service-card {
  background: var(--ri-soft) !important;
  border: 1px solid var(--ri-line-strong);
  border-radius: 12px !important;
}

.service-card:hover {
  background: var(--ri-burgundy-soft) !important;
  border-color: #d9aebe;
}

/* Services use open editorial spacing instead of boxes around copy. */
.services-flow-inner,
.service-full,
.service-left,
.service-right,
.service-outcome,
.service-grid,
.service-card,
.service-capabilities,
.service-capability,
.delivery-note {
  min-width: 0;
  max-width: 100%;
}

.service-full,
.service-full:hover,
.service-full.is-active {
  border: 0 !important;
  box-shadow: 0 18px 50px rgba(1, 23, 66, .07) !important;
}

.service-full:hover,
.service-full.is-active {
  box-shadow: 0 24px 60px rgba(1, 23, 66, .11) !important;
}

.service-full::before,
.service-full::after,
.service-card::before,
.service-card::after {
  display: none !important;
  content: none !important;
}

.service-left {
  border: 0 !important;
}

.service-outcome {
  width: 100%;
  padding: 1.15rem 0 0 !important;
  display: block;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.service-grid {
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: transparent !important;
  border: 0 !important;
}

.service-card,
.service-card + .service-card,
.service-card:hover {
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.service-card:hover {
  transform: translateY(-3px);
}

.service-capability,
.service-capability:hover,
.service-capability:focus-visible,
.service-capability.is-selected {
  padding: .2rem 0;
  color: var(--ri-navy) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.service-capability:hover,
.service-capability:focus-visible,
.service-capability.is-selected {
  color: var(--ri-burgundy) !important;
}

.delivery-note {
  padding: 1.25rem 0 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.team-intro-inner {
  border-color: var(--ri-line-strong);
}

.founder-card {
  border-color: var(--ri-navy) !important;
}

.founder-image {
  width: min(54%, 320px) !important;
  max-width: 320px !important;
  min-height: 0 !important;
  height: auto !important;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ri-navy);
  border-radius: 12px;
  filter: none !important;
}

.founder-image img,
.founder-card:hover .founder-image img,
.founder-card:focus-visible .founder-image img,
.founder-card.is-active .founder-image img {
  filter: none !important;
  object-position: center top;
}

/* Strategy and editorial pages use the same clean white cards. */
.stage-full,
.strategy-row,
.outcome-cell,
.market-card,
.pos-card,
.rev-cell,
.simple-card {
  background: var(--ri-surface) !important;
  border-color: var(--ri-line-strong) !important;
  border-radius: 12px !important;
}

.outcomes,
.positioning {
  background: var(--ri-soft) !important;
}

body.contact-page .contact-layout {
  background: var(--ri-paper) !important;
}

body.contact-page .info-panel,
body.contact-page .form-wrap {
  border-color: var(--ri-navy) !important;
}

body.contact-page .form-group input,
body.contact-page .form-group textarea {
  border-radius: 8px;
  background: var(--ri-soft);
}

/* The bottom identity panel becomes a compact bordered product visual. */
.interaction-signoff {
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2.5rem) clamp(4rem, 7vw, 6rem);
  background: var(--ri-paper);
}

.interaction-signoff-inner {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.interaction-signoff .hero-particle-stage {
  background:
    linear-gradient(rgba(1, 23, 66, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(1, 23, 66, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--ri-soft);
  border-color: var(--ri-navy);
  border-radius: 12px;
}

footer {
  color: var(--ri-navy);
  background: var(--ri-soft) !important;
  border-top: 1px solid var(--ri-line-strong);
}

.footer-column h3,
.footer-column a,
.footer-tagline,
.footer-copy {
  color: var(--ri-navy);
}

.footer-column a:hover {
  color: var(--ri-burgundy);
}

/* Bring the AI widget into the same product language. */
.ri-chatbot-panel,
.ri-chatbot-head,
.ri-chatbot-log,
.ri-chatbot-replies,
.ri-chatbot-actions,
.ri-chatbot-form {
  background: var(--ri-surface);
}

.ri-chatbot-panel {
  border-color: var(--ri-navy);
  border-radius: 12px;
}

.ri-chatbot-launcher,
.ri-chatbot-send {
  color: #fceff4;
  background: var(--ri-burgundy);
  border-color: var(--ri-burgundy);
  border-radius: 12px;
}

@media (max-width: 980px) {
  nav,
  nav.scrolled {
    height: 76px;
  }

  .service-explorer {
    top: 76px;
  }

  .page-hero,
  body:not(.contact-page) .page-hero,
  body.contact-page .page-hero {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  nav,
  nav.scrolled {
    height: 64px;
  }

  .logo img {
    width: 122px;
  }

  .hero {
    padding: 8rem 1rem 4.5rem;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 13vw, 4rem);
  }

  .page-hero,
  body:not(.contact-page) .page-hero,
  body.contact-page .page-hero {
    min-height: 350px;
    padding: 8rem 1rem 4rem;
  }

  .page-title {
    font-size: clamp(2.8rem, 12vw, 4rem);
  }

  .service-explorer {
    top: 64px;
  }

  .pillar-card,
  .pillar-card:nth-child(2n),
  .vision-card,
  .industries-copy,
  .trust-copy {
    min-height: 0;
  }

  .founder-image {
    width: min(70%, 260px) !important;
  }

  .nav-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .hero .btn-primary,
  .hero .btn-outline,
  .surface-card,
  .service-full,
  .founder-card {
    transform: none !important;
    transition: none !important;
  }
}