/* RichFolds white-canvas theme — loaded after every page stylesheet. */
:root {
  --white-canvas: #ffffff;
  --white-soft: #f7f7fb;
  --white-line: rgba(30, 27, 52, 0.12);
  --white-ink: #11111d;
}

html,
body,
body.inner-page,
body.contact-page {
  background: var(--white-canvas) !important;
  color: var(--white-ink) !important;
}

/* Homepage */
.site-header {
  background:
    radial-gradient(circle at 78% 25%, rgba(158, 216, 255, 0.38), transparent 32%),
    radial-gradient(circle at 24% 68%, rgba(167, 139, 250, 0.22), transparent 32%),
    #fff !important;
  color: var(--white-ink) !important;
}

.site-header .hero-art {
  background:
    linear-gradient(rgba(118, 87, 232, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 87, 232, 0.045) 1px, transparent 1px),
    transparent !important;
  background-size: 54px 54px !important;
}

.site-header .hero-shade {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.3)) !important;
}

.site-header .hero-paper-grid {
  opacity: 0.38;
}

.site-header .hero-color-wash {
  opacity: 0.42;
  mix-blend-mode: multiply;
}

.hero-kicker,
.canvas-stage,
.stage-console,
.stage-stamp {
  border-color: rgba(30, 27, 52, 0.15) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--white-ink) !important;
  box-shadow: 0 22px 60px rgba(44, 34, 91, 0.09) !important;
}

.hero-kicker,
.hero-copy > p,
.stage-axis,
.stage-index,
.stage-hint,
.hero-meta {
  color: rgba(17, 17, 29, 0.64) !important;
}

.hero-copy h1,
.hero-copy h1 span,
.hero-meta a,
.hero-scroll {
  color: var(--white-ink) !important;
}

.hero-copy h1 .hero-line-accent {
  color: var(--rich-purple) !important;
}

.hero-primary {
  border-color: transparent !important;
  background: var(--baby-yellow) !important;
  color: var(--white-ink) !important;
}

.hero-secondary {
  border-color: rgba(17, 17, 29, 0.24) !important;
  color: var(--white-ink) !important;
}

.hero-meta {
  border-color: rgba(17, 17, 29, 0.14) !important;
}

.stage-console code,
.stage-console b {
  color: var(--rich-purple) !important;
}

.work-section {
  background:
    radial-gradient(circle at 88% 6%, rgba(167, 139, 250, 0.18), transparent 26%),
    #fff !important;
  color: var(--white-ink) !important;
}

.work-intro h2,
.work-section .section-label.light {
  color: var(--white-ink) !important;
}

.work-section .section-label.light span {
  color: var(--rich-purple) !important;
}

.proof-section::before,
.stack-section::before {
  background: #fff !important;
}

.process-section {
  background:
    radial-gradient(circle at 88% 5%, rgba(242, 255, 159, 0.48), transparent 24%),
    radial-gradient(circle at 8% 90%, rgba(158, 216, 255, 0.28), transparent 25%),
    #fff !important;
  color: var(--white-ink) !important;
  border-top: 1px solid var(--white-line);
  border-bottom: 1px solid var(--white-line);
}

.process-section::after {
  border-color: rgba(118, 87, 232, 0.08) !important;
}

.stack-section {
  color: var(--white-ink) !important;
}

.stack-section > .section-label,
.stack-layout > h2 {
  color: var(--white-ink) !important;
}

.stack-section > .section-label span {
  color: var(--rich-purple) !important;
}

.stack-layout > h2 em {
  color: var(--rich-purple) !important;
}

.stack-grid {
  border-color: var(--white-line) !important;
  background: var(--white-line) !important;
}

.stack-grid span,
.stack-grid span:nth-child(2),
.stack-grid span:nth-child(5),
.stack-grid span:nth-child(8) {
  background:
    radial-gradient(circle at 100% 0%, rgba(158, 216, 255, 0.2), transparent 44%),
    #fff !important;
  color: var(--white-ink) !important;
}

.stack-grid span::after {
  color: rgba(17, 17, 29, 0.42) !important;
}

.stack-grid span:hover {
  background: var(--baby-blue) !important;
}

.pre-footer-cta {
  background:
    linear-gradient(rgba(118, 87, 232, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 87, 232, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 15% 85%, rgba(158, 216, 255, 0.48), transparent 28%),
    #fff !important;
  background-size: 44px 44px, 44px 44px, auto, auto !important;
  color: var(--white-ink) !important;
  border-top: 1px solid var(--white-line);
}

.pre-footer-cta h2,
.pre-footer-cta p {
  color: var(--white-ink) !important;
}

.pre-footer-cta h2 span {
  color: var(--rich-purple) !important;
}

/* Inner pages */
.inner-hero {
  background:
    radial-gradient(circle at 76% 25%, rgba(167, 139, 250, 0.22), transparent 31%),
    radial-gradient(circle at 18% 72%, rgba(158, 216, 255, 0.3), transparent 31%),
    #fff !important;
  color: var(--white-ink) !important;
}

.inner-hero::before {
  background:
    linear-gradient(rgba(118, 87, 232, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 87, 232, 0.05) 1px, transparent 1px) !important;
}

.inner-hero::after {
  border-color: rgba(118, 87, 232, 0.12) !important;
  box-shadow:
    0 0 0 80px rgba(118, 87, 232, 0.025),
    0 0 0 160px rgba(158, 216, 255, 0.02) !important;
}

.inner-kicker,
.inner-hero-bottom > p {
  color: rgba(17, 17, 29, 0.62) !important;
}

.inner-hero h1 {
  color: var(--white-ink) !important;
}

.inner-hero h1 em {
  color: var(--rich-purple) !important;
}

.inner-page .hero-code-card {
  border-color: var(--white-line) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--white-ink) !important;
  box-shadow: 0 24px 65px rgba(45, 35, 92, 0.1) !important;
}

.inner-page .hero-code-card span {
  color: rgba(17, 17, 29, 0.5) !important;
}

.ip-section.dark {
  background:
    radial-gradient(circle at 92% 8%, rgba(167, 139, 250, 0.15), transparent 27%),
    var(--white-soft) !important;
  color: var(--white-ink) !important;
  border-top: 1px solid var(--white-line);
  border-bottom: 1px solid var(--white-line);
}

.dark .ip-label,
.dark .ip-heading h2,
.dark .ip-heading-copy > p {
  color: var(--white-ink) !important;
}

.dark .ip-label::before {
  background: var(--rich-purple) !important;
}

.dark .ip-heading h2 em {
  color: var(--rich-purple) !important;
}

.platform-rows {
  border-top-color: var(--white-line) !important;
}

.platform-row {
  border-bottom-color: var(--white-line) !important;
}

.platform-row > span,
.platform-row a::after {
  color: var(--rich-purple) !important;
}

.platform-row p {
  color: var(--ip-muted) !important;
}

.value-grid {
  background: var(--white-line) !important;
}

.value-card {
  background: #fff !important;
  color: var(--white-ink) !important;
}

.value-card span {
  color: var(--rich-purple) !important;
}

.value-card p {
  color: var(--ip-muted) !important;
}

.ip-section.tint {
  background:
    radial-gradient(circle at 88% 7%, rgba(242, 255, 159, 0.55), transparent 24%),
    radial-gradient(circle at 5% 95%, rgba(158, 216, 255, 0.3), transparent 24%),
    #fff !important;
  border-top: 1px solid var(--white-line);
  border-bottom: 1px solid var(--white-line);
}

.ip-cta {
  background:
    linear-gradient(rgba(118, 87, 232, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 87, 232, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 20% 85%, rgba(158, 216, 255, 0.45), transparent 28%),
    #fff !important;
  background-size: 42px 42px, 42px 42px, auto, auto !important;
  color: var(--white-ink) !important;
  border-top: 1px solid var(--white-line);
}

.ip-cta h2 {
  color: var(--white-ink) !important;
}

.ip-cta h2 span {
  color: var(--rich-purple) !important;
}

.case-hero .case-study-stage {
  border-color: var(--white-line) !important;
  background: rgba(118, 87, 232, 0.04) !important;
}

/* Contact page */
.contact-page .contact-hero {
  background:
    radial-gradient(circle at 82% 22%, rgba(167, 139, 250, 0.2), transparent 28%),
    radial-gradient(circle at 58% 68%, rgba(158, 216, 255, 0.25), transparent 28%),
    #fff !important;
  color: var(--white-ink) !important;
}

.contact-page .contact-grid-bg {
  background-image:
    linear-gradient(rgba(118, 87, 232, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118, 87, 232, 0.05) 1px, transparent 1px) !important;
}

.contact-page .contact-hero h1 {
  color: var(--white-ink) !important;
}

.contact-page .contact-title-block > p:last-child,
.contact-page .contact-eyebrow {
  color: rgba(17, 17, 29, 0.62) !important;
}

.contact-page .contact-start-panel {
  border-color: var(--white-line) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(158, 216, 255, 0.25), transparent 34%),
    #fff !important;
  color: var(--white-ink) !important;
  box-shadow: 12px 14px 0 rgba(118, 87, 232, 0.08) !important;
}

.contact-page .start-panel-top,
.contact-page .contact-start-panel li {
  color: rgba(17, 17, 29, 0.62) !important;
  border-color: var(--white-line) !important;
}

.contact-page .contact-content {
  background: #fff !important;
}

.contact-page .contact-section-label,
.contact-page .project-form label > span,
.contact-page .project-form legend {
  color: #686576 !important;
}

.contact-page .project-form input,
.contact-page .project-form select,
.contact-page .project-form textarea {
  border-bottom-color: rgba(17, 17, 29, 0.2) !important;
  color: var(--white-ink) !important;
}

.contact-page .project-form input::placeholder,
.contact-page .project-form textarea::placeholder {
  color: #a09dac !important;
}

.contact-page .project-form select {
  color-scheme: light !important;
}

.contact-page .service-options label span {
  border-color: rgba(17, 17, 29, 0.18) !important;
  color: #686576 !important;
}

.contact-page .service-options label span:hover {
  border-color: var(--rich-purple) !important;
  color: var(--white-ink) !important;
}

.contact-page .service-options input:checked + span {
  border-color: var(--baby-yellow) !important;
  background: var(--baby-yellow) !important;
  color: var(--white-ink) !important;
}

.contact-page .availability-card {
  border-color: var(--white-line) !important;
  background:
    radial-gradient(circle at 92% 5%, rgba(167, 139, 250, 0.18), transparent 34%),
    var(--white-soft) !important;
  color: var(--white-ink) !important;
}

.contact-page .availability-card > p,
.contact-page .availability-card > span,
.contact-page .contact-facts span {
  color: #777485 !important;
}

.contact-page .contact-facts,
.contact-page .contact-facts > div {
  border-color: var(--white-line) !important;
}

.contact-page .contact-facts strong {
  color: var(--white-ink) !important;
}

.contact-page .contact-pixel-art strong {
  color: var(--white-ink) !important;
}

.contact-page .contact-footer {
  border-top-color: var(--white-line) !important;
  background: #fff !important;
  color: #777485 !important;
}

/* Light footers */
.site-footer,
.mini-footer {
  border-top: 1px solid var(--white-line) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(167, 139, 250, 0.12), transparent 24%),
    #fff !important;
  color: var(--white-ink) !important;
}

.site-footer .brand-lockup,
.site-footer h2,
.mini-footer-logo,
.mini-footer-col h3 {
  color: var(--white-ink) !important;
}

.site-footer .brand-lockup img,
.mini-footer-logo img,
.contact-footer .brand-lockup img {
  filter: none !important;
}

.footer-brand > p,
.footer-column a,
.mini-footer-brand p,
.mini-footer-col a {
  color: #696677 !important;
}

.footer-column a:hover,
.mini-footer-col a:hover {
  color: var(--rich-purple) !important;
}

.footer-contact {
  border-color: var(--white-line) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(158, 216, 255, 0.25), transparent 40%),
    var(--white-soft) !important;
}

.availability {
  color: #696677 !important;
}

.footer-bottom,
.mini-footer-bottom {
  border-top-color: var(--white-line) !important;
  color: #777485 !important;
}

.footer-glow {
  opacity: 0.18 !important;
}