/* Shared visual direction. Loaded after mvp.css; content and behavior stay in HTML/JS. */
:root {
  --navy: #132B46;
  --navy-light: #315A77;
  --brass: #D9A441;
  --ivory: #F8F4EB;
  --blue-soft: #E9EEF3;
  --forest: var(--navy);
  --forest-deep: var(--navy);
  --paper: var(--ivory);
  --white: #FFFDFA;
  --soft: var(--blue-soft);
  --lime: var(--brass);
  --green: var(--navy-light);
  --ink: var(--navy);
  --muted: #4D6072;
  --line: #C8D2DB;
  --shadow: 0 1.2rem 3.2rem rgba(19, 43, 70, .12);
}

body { background: var(--ivory); color: var(--navy); }
::selection { background: var(--brass); color: var(--navy); }
.site-header { background: rgba(248, 244, 235, .98); border-bottom-color: var(--line); }
.desktop-nav a, .mobile-nav a { color: var(--navy); }
.desktop-nav a:hover, .mobile-nav a:hover, .text-link:hover { color: var(--navy-light); }
.eyebrow, .profile-role, .review-source { color: var(--navy-light); }
.text-link, .review-source { text-underline-offset: .22em; }
.text-link:hover, .review-source:hover { text-decoration: underline; }

.hero, .mswia-hero, .section--forest, .consultation-section {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(233, 238, 243, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 238, 243, 0.05) 1px, transparent 1px),
    linear-gradient(125deg, #132B46 12%, #315A77 100%);
  background-size: 72px 72px, 72px 72px, auto;
  color: var(--blue-soft);
}

.hero .eyebrow, .mswia-hero .eyebrow, .section--forest .section-heading .eyebrow,
.consultation-card .eyebrow, .form-layout .eyebrow { color: var(--blue-soft); }
.hero-lead, .hero-microcopy, .mswia-boundary,
.section--forest .section-heading p, .consultation-card p,
.form-layout > div > p:not(.eyebrow) { color: var(--blue-soft); }
.hero-figure::after, .mswia-figure::after { border-color: var(--brass); pointer-events: none; }
.hero-figure img, .mswia-figure img { border-radius: 1rem; }
.hero-figure figcaption, .mswia-figure figcaption { background: var(--ivory); color: var(--navy); }
.mswia-boundary { border-color: #8CA3B5; background: rgba(19, 43, 70, .42); }

.header-cta, .button, .consultation-card .button {
  background: var(--brass);
  color: var(--navy);
  border-radius: .45rem;
  box-shadow: 0 .25rem .8rem rgba(19, 43, 70, .08);
}
.header-cta:hover, .button:hover, .consultation-card .button:hover {
  background: #E7B85C;
  color: var(--navy);
}
.header-cta:active, .button:active, .consultation-card .button:active { background: #CB9635; }
.button-secondary { border-color: var(--navy-light); color: var(--navy); }
.button-secondary:hover { border-color: var(--navy); background: var(--blue-soft); color: var(--navy); }
.hero .button-secondary, .mswia-hero .button-secondary, .consultation-section .button-secondary {
  border-color: #B6C5D1;
  background: rgba(19, 43, 70, .3);
  color: var(--ivory);
}
.hero .button-secondary:hover, .mswia-hero .button-secondary:hover, .consultation-section .button-secondary:hover {
  border-color: var(--brass);
  background: var(--navy);
  color: var(--ivory);
}

.section--soft, .purchase-section, .mswia-stage-section, .faq-hero { background: var(--blue-soft); }
.section--paper, .proof-strip { background: var(--ivory); }
.proof-grid p::before { background: var(--brass); }
.card, .case-copy, .faq-card, .faq-list details { border-color: var(--line); box-shadow: 0 .35rem 1.2rem rgba(19, 43, 70, .04); }
.card { border-radius: .8rem; }
.card p { color: var(--muted); }
.icon-wrap, .section--forest .icon-wrap { background: var(--blue-soft); color: var(--navy-light); }
.stage-icon { color: var(--navy-light); }
.process-card { background: var(--white); }
.product-card--mswia, .case-result { background: var(--blue-soft); }
.price-card--accent { border-color: var(--navy-light); border-top-color: var(--brass); background: var(--blue-soft); }
.case-result, .faq-boundary, .privacy-card--production .notice { border-left-color: var(--brass); }
.consultation-card { background: rgba(19, 43, 70, .32); border-color: #8CA3B5; }

.channel-link { border-color: var(--navy-light); color: var(--navy); background: transparent; }
.channel-link:hover { border-color: var(--navy); background: var(--blue-soft); color: var(--navy); }
.channel-link--whatsapp { background: var(--navy); color: var(--ivory); }
.channel-link--whatsapp:hover { background: var(--navy-light); color: var(--ivory); }
.consultation-section .channel-link { border-color: #B6C5D1; background: rgba(19, 43, 70, .4); color: var(--ivory); }
.consultation-section .channel-link:hover { border-color: var(--brass); background: var(--navy); color: var(--ivory); }
.lead-form { background: var(--navy); border-color: #8CA3B5; }
.lead-form label, .lead-form .consent-line, .field-optional, .form-status { color: var(--blue-soft); }
.lead-form .consent-line a { color: var(--ivory); text-underline-offset: .2em; }
.lead-form input:not([type="checkbox"]), .lead-form select, .lead-form textarea {
  background: var(--ivory);
  color: var(--navy);
  border-color: #8CA3B5;
}
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--muted); opacity: 1; }
.lead-form input[type="checkbox"] { accent-color: var(--brass); }
.lead-form [aria-invalid="true"] { border-color: #A53030; }
.lead-form .button:disabled { background: #C8D2DB; color: var(--navy); cursor: wait; }

.site-footer { background: var(--navy); color: var(--blue-soft); }
.footer-static, .footer-links, .footer-bottom, .site-footer a { color: var(--blue-soft); }
.site-footer a:hover { color: var(--ivory); text-decoration: underline; }
.footer-bottom { border-top-color: #607B90; }
.footer-brand { background: var(--ivory); border-radius: .25rem; }
.privacy-card, .thank-you-card, .not-found-card { background: var(--white); border-color: var(--line); border-radius: 1rem; }
.faq-list details[open] { border-color: var(--navy-light); }

/* Specific form and link rules override the original focus selectors too. */
:focus-visible,
a:focus-visible, summary:focus-visible,
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 3px solid #D9A441;
  outline-offset: 2px;
}

@media (max-width: 68.75rem) {
  .mobile-nav[open] nav { background: var(--ivory); border-color: var(--line); }
}

@media (max-width: 40rem) {
  .hero, .mswia-hero, .section--forest, .consultation-section { background-size: 48px 48px, 48px 48px, auto; }
}

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