/* ZARIR Ocean and Coral palette — rev-20260915-046-ocean-coral-from-039 */
:root {
  --paper: #F2F4F2;
  --surface: #FFFFFF;
  --white: #FFFFFF;
  --card: #FFFFFF;
  --ink: #24313A;
  --graphite: #24313A;
  --slate: rgba(36, 49, 58, .78);
  --muted: rgba(36, 49, 58, .72);
  --steel: rgba(36, 49, 58, .55);
  --line: rgba(36, 49, 58, .16);
  --mist: #F2F4F2;
  --blue: #1F4B66;
  --primary: #1F4B66;
  --cyan: #438A94;
  --secondary: #438A94;
  --cyan-light: #F2F4F2;
  --orange: #D46B52;
  --accent: #D46B52;
  --navy: #1F4B66;
  --shadow: 0 22px 64px rgba(36, 49, 58, .16);
}

html,
body {
  background: var(--paper);
  color: var(--ink);
}

.topbar,
.site-header {
  background: rgba(242, 244, 242, .94);
  border-bottom-color: rgba(36, 49, 58, .16);
}

.topbar.is-scrolled,
.site-header.is-scrolled {
  background: rgba(242, 244, 242, .98);
  box-shadow: 0 14px 34px rgba(36, 49, 58, .12);
}

.button,
.capability-card-accent,
.dark-section,
.delivery-section {
  background-color: var(--primary);
  border-color: var(--primary);
}

.button:hover,
.button:focus-visible {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.capability-card-accent {
  background-image: linear-gradient(145deg, var(--primary), var(--secondary));
}

.hero,
.signal-section,
.contact-section,
.cta-section {
  background-color: var(--paper);
}

.hero {
  background-image: linear-gradient(142deg, var(--surface) 0%, var(--paper) 62%, var(--paper) 100%);
}

.signal-bar,
.signal-strip,
.reference-section,
.product-discovery,
.workflow-walkthrough,
.context-trust,
.video-band,
.media-section,
.workspace-panels {
  background-color: var(--surface);
}

.contact-card,
.cta-shell,
.product-card,
.problem-card,
.trust-block,
.capability-card,
.principle-card,
.media-card {
  background-color: var(--surface);
  border-color: var(--line);
}

.media-card,
.hero-visual,
.subpanel-media,
.reference-media,
.reference-image {
  background-color: var(--paper);
}

.site-footer {
  background: var(--paper);
  color: var(--graphite);
  border-top-color: var(--line);
}

.footer-logo {
  filter: none;
}

.brand-lockup img,
.footer-logo {
  object-fit: contain;
}

*:focus-visible {
  outline-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}