/* Freastal Portal identity: navy, mint, teal and lime from 06-portal.svg. */
:root {
  --ink: #102b48;
  --navy: #102b48;
  --blue: #187a83;
  --pale: #eef9f6;
  --muted: #536a78;
  --line: #d6e9e6;
}

.brand img { width: 215px; }
.footer img { width: 205px; }
.nav-cta { border-color: #187a83; }
.nav-cta:hover { background: #187a83; }
.eyebrow, .hero h1 em, .example h2 em { color: #83ddcf; }
.eyebrow.blue, .approach-no, .card-icon, .value-grid span,
.principle-list span, .use-grid article > span, .audience-grid article > span,
.faq-list summary::after, .footer a:hover { color: #187a83; }
.eyebrow-line { background: #83ddcf; }
.button-primary { background: #c7f074; color: #102b48; }
.button-primary:hover { background: #ddf8a8; }
.hero-glow { background: radial-gradient(circle, #187a8355 0%, #187a8300 68%); }
.hero-visual { border-color: #39867e; background: linear-gradient(155deg, #173d54, #102b48 70%); }
.process-engine { border-color: #83ddcf; background: linear-gradient(100deg, #185b65, #187a83); }
.icon-tile, .engine-orbit { color: #83ddcf; }
.process-output .icon-tile, .status span { background: #c7f074; color: #102b48; }
.flow-line span { background: #83ddcf; }
.hero-bottom .down-arrow { color: #83ddcf; }

.value-strip, .principle, .use-cases { background: #eef9f6; }
.value-strip, .value-grid > div, .value-grid > div:first-child,
.value-grid > div:nth-child(3), .principle-list, .principle-list > div,
.faq-list, .faq-list details { border-color: #d6e9e6; }
.service-card.featured { background: #e5f7f1; border-color: #bce5da; }
.service-card, .use-grid article, .audience-grid article { border-color: #d6e9e6; }
.audience { background: #f4faf8; }
.audience-close a { color: #187a83; }
.example { background: #102b48; }
.cta { background: #187a83; }
.cta .eyebrow { color: #c7f074; }
.cta p:not(.eyebrow), .contact-hint { color: #ebf9f5; }
.brief-prompts span, .button-outline { border-color: #bce5da; }
.footer-bottom { border-color: #d6e9e6; }
:where(a, button, summary):focus-visible { outline-color: #187a83; }

@media (max-width: 900px) {
  .site-header { height: 76px; }
  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 14px 22px #102b481c;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .nav.open { display: flex; }
  .nav-cta { text-align: center; }
}

@media (max-width: 680px) {
  .site-header { height: 72px; }
  .nav { top: 72px; }
  .brand img { width: 175px; }
  .footer img { width: 205px; }
}