/* Newfound preview site styles: shared by every page. */
:root { color-scheme: light; }
body { background: var(--color-paper); }

.mx-banner { position: static; background: var(--color-clay-tint); color: var(--color-ink); font-size: 14px; padding: 8px 16px; text-align: center; }

/* Hero: theme hero, centered panel */
.mx-hero { align-items: center; padding-bottom: 144px; }
@media (min-width: 768px) { .mx-hero { padding-block: 144px 168px; } }
.mx-hero-panel .nf-hero-sub { margin-bottom: 24px; }
.mx-hero-link { margin-top: 16px !important; }
.mx-hero .nf-hero-fade { background: linear-gradient(180deg, rgba(34,50,63,.30) 0%, rgba(34,50,63,.55) 45%, rgba(34,50,63,.92) 100%); }
.mx-hero-panel { max-width: 780px; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: 0; }
.mx-hero-panel .nf-hero-sub { margin-inline: auto; max-width: 48ch; }
.mx-hero-panel .nf-bullets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 0 0 24px; text-align: left; }
.mx-hero-panel .nf-bullets > li { color: #FFFFFF; font-size: 17px; }
.mx-hero-link { display: inline-block; padding-block: 10px; margin-top: 16px; color: var(--color-mist); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.mx-hero-link:hover { color: #FFFFFF; }

/* Router: white card that overlaps the hero */
.mx-router { position: relative; z-index: 2; margin-top: -64px; }
.mx-router .nf-card { padding: 32px; }
.mx-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-line); margin-top: 24px; }
@media (max-width: 900px) { .mx-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mx-routes { grid-template-columns: 1fr; } .mx-router .nf-card { padding: 24px 20px; } }
.mx-route { display: grid; gap: 6px; align-content: start; padding: 20px 16px; border-bottom: 1px solid var(--color-line); text-decoration: none; transition: background-color .15s ease; }
.mx-route:hover { background: var(--color-paper); }
.mx-route q { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--color-deep-slate); quotes: "\201C" "\201D"; }
.mx-route span { color: var(--color-terracotta-ink); font-weight: 600; font-size: 15px; }

/* Who we help */
.mx-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .mx-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mx-who { grid-template-columns: 1fr; } }
.mx-who .nf-card { padding: 24px; }
.mx-who .nf-h3 { font-size: 19px; margin-bottom: 6px; }
.mx-who .mx-all { background: var(--color-deep-slate); border-color: var(--color-deep-slate); }
.mx-who .mx-all .nf-h3 { color: #FFFFFF; }
.mx-who .mx-all .nf-body { color: #DCE4EA; }
.mx-who .mx-all a { display: inline-block; padding-block: 10px; color: #FFFFFF; font-weight: 600; text-underline-offset: 3px; }

/* How we work: glass steps joined by a line */
.mx-steps { display: grid; gap: 0; width: 100%; max-width: 520px; position: relative; z-index: 1; }
.mx-steps .nf-glass + .nf-glass { margin-top: 24px; position: relative; }
.mx-steps .nf-glass + .nf-glass::before { content: ""; position: absolute; left: 49px; top: -25px; width: 2px; height: 24px; background: var(--color-terracotta); }
.mx-steps .nf-bullets { margin-top: 12px; }
.mx-steps .nf-bullets > li { font-size: 16px; color: #DCE4EA; }

/* Sample dashboard inside a theme window over a scene */
.mx-dash { background: #FFFFFF; border-radius: 18px; overflow: hidden; text-align: left; }
.mx-dash-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--color-paper-warm); border-bottom: 1px solid var(--color-line); font-size: 13px; color: var(--color-muted); }
.mx-dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-line-strong); display: inline-block; }
.mx-dash-bar span { margin-left: 8px; }
.mx-dash-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
@media (max-width: 860px) { .mx-dash-body { grid-template-columns: 1fr; } }
.mx-dash-col { padding: 28px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.mx-dash-col + .mx-dash-col { border-left: 1px solid var(--color-line); }
@media (max-width: 860px) { .mx-dash-col + .mx-dash-col { border-left: 0; border-top: 1px solid var(--color-line); } .mx-dash-col { padding: 20px; } }
.mx-dash h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--color-deep-slate); margin: 0; }
.mx-dash .mx-hello { color: var(--color-muted); font-size: 14px; margin-top: 4px; }
.mx-attn { list-style: none; padding: 0; margin: 0; }
.mx-attn li { position: relative; padding: 12px 0 12px 24px; border-top: 1px solid var(--color-line); font-weight: 600; color: var(--color-ink); line-height: 1.4; font-size: 16px; }
.mx-attn li::before { content: ""; position: absolute; left: 2px; top: calc(12px + .45em); width: 10px; height: 10px; border-radius: 50%; background: var(--color-terracotta); }
.mx-attn li.warn::before { background: var(--color-warning); }
.mx-attn small { display: block; margin-top: 4px; font-weight: 400; color: var(--color-muted); font-size: 14px; }
.mx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--color-line); }
.mx-stats div { padding: 14px 10px; display: grid; gap: 2px; }
.mx-stats div + div { border-left: 1px solid var(--color-line); padding-left: 16px; }
.mx-stats b { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--color-slate-blue); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mx-stats span { font-size: 14px; color: var(--color-muted); }
.mx-jobs-scroll { overflow-x: auto; }
.mx-jobs { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 15px; color: var(--color-body); }
.mx-jobs th, .mx-jobs td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--color-line); }
.mx-jobs th { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-muted); }
.mx-jobs tr:last-child td { border-bottom: 0; }
.mx-st { font-weight: 600; white-space: nowrap; color: var(--color-ink); }
.mx-st::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--color-harbor); }
.mx-st.ok::before { background: var(--color-success); }
.mx-st.go::before { background: var(--color-slate-blue); }
.mx-st.wait::before { background: var(--color-warning); }
.mx-st.due::before { background: var(--color-terracotta); }
.mx-monitor { font-size: 14px; color: var(--color-muted); }
.mx-monitor b { color: var(--color-ink); }

/* Estimates */
.mx-est-flow { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.mx-est-flow li { display: flex; gap: 16px; align-items: flex-start; }
.mx-est-flow q { quotes: "\201C" "\201D"; }

/* Services */
.mx-svc .nf-card { display: grid; gap: 14px; align-content: start; }
.mx-svc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mx-svc li { display: grid; gap: 2px; border-top: 1px solid var(--color-line); padding-top: 12px; scroll-margin-top: 110px; }
.mx-svc li b { font-family: var(--font-display); font-weight: 600; color: var(--color-deep-slate); font-size: 17px; }
.mx-svc li span { color: var(--color-body); font-size: 16px; line-height: 1.5; }
[id] { scroll-margin-top: 110px; }

/* Design review fixes (2026-10-16) */
.nf-nav-link { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  .nf-nav-bar > .md\:flex, .nf-nav-bar .md\:inline-flex { display: none !important; }
  #mobile-menu-btn { display: flex !important; }
  #mobile-menu:not(.hidden) { display: block !important; }
}
@media (max-width: 560px) {
  .mx-jobs { min-width: 0; }
  .mx-jobs th:nth-child(3), .mx-jobs td:nth-child(3) { display: none; }
  .nf-window:has(.mx-dash) { padding: 0; }
}
@media (max-width: 899px) {
  .nf-split-copy { padding-bottom: 40px; }
  .nf-split-scene { padding-top: 24px; }
}
footer ul.space-y-3 > :not(:last-child) { margin-bottom: 0; }
footer .space-y-3 > * + * { margin-top: 0 !important; }
.mx-foot-link { display: inline-block; padding-block: 12px; }
@media (max-width: 767px) {
  footer .nf-container { padding-top: 40px; }
  footer p, .mx-foot-link { font-size: 16px !important; }
}

/* Subpages */
.mx-page-hero { min-height: 0; padding-block: 144px 64px; }
@media (max-width: 767px) { .mx-page-hero { padding-block: 128px 64px; } }
.mx-page-hero .nf-hero-sub { margin-bottom: 0; }
.mx-page-hero .nf-btn { margin-top: 24px; }
.mx-page-h1 { font-size: clamp(36px, 5vw, 52px); }

.mx-jump { position: sticky; top: 72px; z-index: 5; background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.mx-jump .nf-container { display: flex; gap: 8px 24px; overflow-x: auto; scrollbar-width: none; }
.mx-jump a { flex: none; padding: 14px 0; font-weight: 600; font-size: 15px; color: var(--color-slate-blue); text-decoration: none; }
.mx-jump a:hover { color: var(--color-terracotta-ink); }

.mx-svc-row { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .mx-svc-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }

.mx-results { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .mx-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mx-results { grid-template-columns: 1fr; } }
.mx-results .nf-card { display: grid; gap: 8px; align-content: start; }
.mx-results b { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.05; color: var(--color-slate-blue); }

.mx-card-link { display: grid; gap: 8px; align-content: start; text-decoration: none; transition: border-color .15s ease; }
.mx-card-link:hover { border-color: var(--color-line-strong); }
.mx-card-link span { color: var(--color-terracotta-ink); font-weight: 600; font-size: 15px; margin-top: 8px; }

.mx-contact-link { display: grid; gap: 4px; padding: 20px 24px; text-decoration: none; }
.mx-contact-link b { color: var(--color-deep-slate); font-size: 17px; overflow-wrap: anywhere; }

.mx-form { display: grid; gap: 16px; }
.mx-field { display: grid; gap: 8px; }
.mx-form select.nf-input { appearance: auto; }

.mx-legal { max-width: 760px; margin-inline: auto; color: var(--color-body); font-size: 16px; line-height: 1.65; }
.mx-legal section + section { margin-top: 40px; }
.mx-legal h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--color-deep-slate); margin: 0 0 16px; }
.mx-legal h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--color-deep-slate); margin: 24px 0 8px; }
.mx-legal p { margin: 0 0 12px; }
.mx-legal ul { list-style: disc; padding-left: 24px; margin: 0 0 16px; display: grid; gap: 4px; }
.mx-legal a { color: var(--color-slate-blue); text-decoration: underline; text-underline-offset: 3px; }
.mx-legal > div > p:first-child { color: var(--color-muted); font-size: 14px; }
.mx-legal > div > div:first-of-type { background: #fff; border: 1px solid var(--color-line); border-radius: 16px; padding: 24px; margin: 24px 0 40px; }
.mx-svc-row .nf-link { padding-block: 12px; margin-top: 12px !important; }
.mx-est-flow.mb-10 { margin-bottom: 40px; }
#workshops.nf-band { padding-top: 40px; }