@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

/*
 * Ambia Origins visual system
 * Loaded last on every route so page structure, copy and behavior stay intact
 * while the complete site shares one editorial design language.
 */
:root {
  --white: #ffffff;
  --off-white: #f7f5f2;
  --paper: #ffffff;
  --paper-soft: #f7f5f2;
  --cream: #f0ede8;
  --cream-2: #f7f5f2;
  --surface: #ffffff;
  --surface-2: #f7f5f2;
  --black: #0e0e0e;
  --ink: #0e0e0e;
  --text: #0e0e0e;
  --mid-gray: #3d3d3d;
  --muted: #3d3d3d;
  --muted-ink: #3d3d3d;
  --quiet: #6d6965;
  --muted-gray: #6d6965;
  --rule: #ddd9d3;
  --rule-soft: rgba(14,14,14,.09);
  --rule-dark: #0e0e0e;
  --red: #c0272d;
  --red-bright: #c0272d;
  --red-dark: #8b1a1e;
  --red-wash: rgba(192,39,45,.06);
  --copper: #c0272d;
  --acid-beige: #f0ede8;
  --site-header-height: 64px;
  --notice-height: 0px;
}

html {
  color: var(--text);
  background: var(--white);
  scroll-padding-top: 92px;
}

body,
.tool-site,
.planner-site,
.projection-site,
.directory-site {
  color: var(--text);
  background: var(--white);
  background-image: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 86% 14%,rgba(192,39,45,.055),transparent 28%),
    radial-gradient(circle at 14% 74%,rgba(192,39,45,.035),transparent 26%);
  background-size: auto;
  mask-image: none;
  mix-blend-mode: normal;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .035;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14,14,14,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,14,14,.5) 1px,transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom,#000,transparent 78%);
  animation: none;
  transform: none;
}

::selection { color: var(--white); background: var(--red); }

body,
button,
input,
select,
textarea { font-family: 'DM Sans', sans-serif; }

h1,
h2,
h3,
.hero-hed,
.sec-title,
.cta-h,
.panel-h,
.proof-num,
.blog-card h2,
.article-hero h1,
.article-section h2,
.related h2,
.tool-monogram,
.hero-result,
.planner-metric strong,
.projection-metric-card strong,
.directory-stats strong {
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
  text-shadow: none;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

h1,
.hero-hed { line-height: .98; }
h2,
.sec-title,
.cta-h { line-height: 1; }
h3,
.panel-h { line-height: 1.1; }

.eyebrow,
.sec-label,
.kicker,
.section-kicker,
.article-kicker,
.nav-tag,
.nav-link,
.nav-menu-link,
.nav-text-link,
.nav-cta,
.blog-link,
.blog-menu summary,
.blog-nav-cta,
.button,
.btn-red,
.btn-ghost,
.text-link,
.panel-n,
.row-n,
.proof-sub,
.proof-attr,
.video-label,
.t-item,
.m-item,
.blog-card-meta,
.blog-card strong,
.article-meta,
.article-back,
.control-label,
.result-tag,
.tool-stage,
.tool-tags,
.tool-link,
.directory-site label,
.contact-form label,
.legal-links,
.disclaimer,
footer a,
footer span {
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  letter-spacing: .14em;
}

.eyebrow,
.sec-label,
.kicker,
.section-kicker,
.article-kicker,
.panel-n,
.row-n { color: var(--red); }

/* Shared navigation */
#nav,
.site-nav,
.blog-nav,
.site-header {
  color: var(--text);
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

#nav,
.site-nav { height: 64px; padding-inline: 56px; }
.site-header { top: 0; height: var(--site-header-height); }
.site-shell { position: relative; z-index: 1; padding-top: var(--site-header-height); }
.blog-nav { min-height: 64px; }
.noncompete-notice { display: none; }

.nav-logo,
.brand,
.blog-brand,
.f-logo,
.footer-logo,
.logo {
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}

.nav-logo .brand-mark,
.brand .brand-mark,
.brand img,
.blog-brand img { width: 27px; height: 27px; }

.nav-actions { gap: 18px; }
.nav-link,
.nav-menu-link,
.nav-text-link,
.blog-link,
.blog-menu summary,
.nav-menu summary {
  min-height: 40px;
  padding: 0 2px;
  color: var(--quiet);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav-link:hover,
.nav-menu-link:hover,
.nav-text-link:hover,
.blog-link:hover,
.blog-menu summary:hover,
.nav-menu summary:hover,
.nav-link:focus-visible,
.nav-menu-link:focus-visible,
.nav-text-link:focus-visible,
.blog-link:focus-visible,
.blog-menu summary:focus-visible,
.nav-menu summary:focus-visible {
  color: var(--text);
  border-bottom-color: var(--red);
  outline: none;
}

.tools-menu-panel,
.nav-menu-panel,
.blog-menu-panel {
  padding: 8px;
  color: var(--text);
  background: rgba(255,255,255,.985);
  border: 1px solid var(--rule);
  box-shadow: 0 16px 42px rgba(14,14,14,.1);
}

.tools-menu-panel a,
.nav-menu-panel a,
.blog-menu-panel a {
  padding: 13px 14px;
  color: var(--text);
  border-bottom-color: var(--rule);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .08em;
}

.tools-menu-panel a:hover,
.tools-menu-panel a:focus-visible,
.tools-menu-panel a[aria-current='page'],
.nav-menu-panel a:hover,
.nav-menu-panel a:focus-visible,
.nav-menu-panel a[aria-current='page'],
.blog-menu-panel a:hover,
.blog-menu-panel a:focus-visible {
  color: var(--white);
  background: var(--red);
}

.nav-cta,
.blog-nav-cta,
.btn-red,
.button-red,
.cta-btn,
.btn-next,
.btn-submit,
.article-cta a,
.article-rail > a,
.site-header .button {
  min-height: 42px;
  padding-inline: 24px;
  color: var(--white);
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 0;
  box-shadow: none;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav-cta:hover,
.blog-nav-cta:hover,
.btn-red:hover,
.button-red:hover,
.cta-btn:hover,
.btn-next:hover,
.btn-submit:hover,
.article-cta a:hover,
.article-rail > a:hover,
.site-header .button:hover {
  color: var(--white);
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: none;
  transform: translateY(-1px);
}

/* Heroes and editorial sections */
.hero,
.blog-index-hero,
.article-hero,
.tool-hero,
.planner-hero,
.projection-hero,
.directory-hero {
  color: var(--text);
  background: var(--white);
  background-image: none;
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}

.hero::after,
.blog-index-hero::after,
.tool-hero::after,
.planner-hero::after,
.projection-hero::after,
.directory-hero::after { display: none; }

.hero-hed,
.hero h1,
.blog-index-hero h1,
.article-hero h1,
.tool-site h1,
.planner-site h1,
.projection-site h1,
.directory-site h1 {
  max-width: 1320px;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: clamp(42px,4.35vw,64px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .98;
  text-transform: none;
  text-shadow: none;
  overflow-wrap: normal;
}

.article-hero h1 { max-width: 1080px; font-size: clamp(42px,5.6vw,76px); }

.hero-hed em,
.hero h1 em,
.blog-index-hero h1 em,
.proof-num em {
  display: inline;
  padding: 0;
  color: var(--red);
  background: transparent;
  box-shadow: none;
  font-style: normal;
  line-height: inherit;
  -webkit-text-stroke: 0;
}

.hero-sub,
.hero-lede,
.sec-body,
.article-deck,
.tool-intro,
.planner-intro,
.projection-intro,
.directory-intro,
.contact-copy > p:not(.kicker) {
  color: var(--muted);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.68;
}

.section,
.proof-section,
.channels,
.measurement,
.fit,
.collaboration,
.blog-list,
.calculator-section,
.planner-model,
.projection-model,
.directory-controls,
.directory-results,
.directory-method {
  border-color: var(--rule);
  box-shadow: none;
}

.section.alt,
.channels,
.fit,
.collaboration,
.blog-list,
.calculator-section,
.planner-model,
.projection-model,
.directory-controls,
.directory-method,
.projection-explainer,
.planner-explainer,
.fit-explainer { background: var(--off-white); }

.sec-title,
.section h2,
.blog-list-head h2,
.tool-site h2,
.planner-site h2,
.projection-site h2,
.directory-site h2 {
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: clamp(38px,4.2vw,62px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: none;
  text-shadow: none;
  overflow-wrap: normal;
}

.panel,
.proof-card,
.problem-grid article,
.channel-grid article,
.fit-lists,
.planner-panel,
.projection-panel,
.calculator-card,
.result-card,
.directory-card,
.tool-card,
.article-author,
.article-cta,
.comparison-wrap,
.article-image img,
.contact-form {
  color: var(--text);
  background: var(--white);
  border-color: var(--rule);
  box-shadow: none;
}

.panel:hover,
.blog-card:hover,
.directory-card:hover,
.tool-card:hover {
  background: var(--white);
  box-shadow: none;
  transform: translateY(-2px);
}

.problem-grid,
.channel-grid,
.grid-3,
.rows,
.measurement-flow,
.fit-lists,
.blog-grid,
.related-grid { border-color: var(--rule); }

.problem-grid article,
.channel-grid article,
.row,
.measurement-flow div,
.fit-lists > div,
.blog-card { border-color: var(--rule); }

/* Keep one restrained dark surface for proof, process and final CTAs. */
.ticker,
.marquee,
.system,
.related,
.cta,
.cta-wrap,
.contact-section,
.tool-cta,
.planner-cta,
.projection-cta,
.directory-cta {
  color: var(--off-white);
  background: var(--black);
  border-color: var(--black);
  box-shadow: none;
}

.ticker,
.marquee { min-height: 44px; }
.ticker div,
.marquee-track { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em; }
.t-item,
.m-item { color: rgba(247,245,242,.55); border-color: rgba(247,245,242,.14); }
.t-item.r,
.m-item.r,
.m-item.hot { color: #ef656a; }

.system h2,
.related h2,
.cta h2,
.cta-wrap h2,
.contact-section h2,
.tool-cta h2,
.planner-cta h2,
.projection-cta h2,
.directory-cta h2 { color: var(--off-white); }

.media-console,
.pm-signal-console {
  color: var(--off-white);
  background: var(--black);
  border: 1px solid var(--black);
  box-shadow: none;
}

.quick-answer {
  color: var(--text);
  background: var(--off-white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--red);
}
.quick-answer span { color: var(--red); }

.article-image img,
.article-author,
.article-cta,
.comparison-wrap { box-shadow: none; }
.article-body > p,
.article-section p,
.source-notes p { color: var(--mid-gray); }
.article-section li,
.source-notes,
.article-kicker::before { border-color: var(--rule); }
.article-kicker::before { background: var(--red); }
.article-rail > div { background: var(--black); }

.blog-nav,
.blog-footer { border-color: var(--rule); box-shadow: none; }
.blog-card h2,
.article-section h2,
.article-author h2 { font-family: 'Syne', sans-serif; font-weight: 700; letter-spacing: -.02em; }

/* Tool suite */
.tool-site,
.planner-site,
.projection-site,
.directory-site { font-weight: 300; }

.tool-site h3,
.planner-site h3,
.projection-site h3,
.directory-site h3 { font-family: 'Syne', sans-serif; text-transform: none; }

.tool-hero,
.planner-hero,
.projection-hero,
.directory-hero { padding-block: clamp(64px,8vw,112px); }

.privacy-note,
.planner-note,
.projection-note,
.directory-note {
  color: var(--mid-gray);
  background: var(--cream);
  border: 1px solid var(--rule);
  font-weight: 400;
}

.planner-panel,
.projection-panel,
.calculator-card,
.results-panel,
.search-block,
.category-filters { border-width: 1px; }

.input-shell,
.search-field,
.planner-control,
.projection-control,
.calculator-field,
input,
select,
textarea {
  color: var(--text);
  background: var(--white);
  border-color: var(--rule);
  border-radius: 0;
  box-shadow: none;
}

.input-shell:focus-within,
.search-field:focus-within,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(192,39,45,.1);
  outline: none;
}

.planner-metric,
.projection-metric-card,
.directory-stats > div,
.result-card.is-primary {
  color: var(--off-white);
  background: var(--black);
  border-color: var(--black);
}

.status-pill,
.tool-tags span,
.category-filters button { border-color: var(--rule); }
.category-filters button.is-active,
.category-filters button:hover { color: var(--white); background: var(--red); border-color: var(--red); }

.contact-form input,
.contact-form select,
.contact-form textarea { font-family: 'DM Sans', sans-serif; background: var(--off-white); }
.contact-form .button { width: 100%; }

footer,
.footer,
.blog-footer {
  color: var(--text);
  background: var(--off-white);
  border-top: 1px solid var(--rule);
  box-shadow: none;
}

@media (max-width:900px) {
  #nav,
  .site-nav { padding-inline: 20px; }
  .hero-hed,
  .hero h1,
  .blog-index-hero h1,
  .tool-site h1,
  .planner-site h1,
  .projection-site h1,
  .directory-site h1 { font-size: clamp(40px,9vw,58px); }
}

@media (max-width:680px) {
  :root { --site-header-height: 60px; }
  body,
  .tool-site,
  .planner-site,
  .projection-site,
  .directory-site { font-size: 16px; }
  #nav,
  .site-nav { height: 60px; padding-inline: 12px; }
  .blog-nav { min-height: 60px; }
  .nav-actions { gap: 7px; }
  .nav-link,
  .nav-menu-link,
  .nav-text-link,
  .blog-link,
  .blog-menu summary,
  .nav-menu summary { font-size: 10px; }
  .nav-cta,
  .blog-nav-cta,
  .site-header .button { min-height: 40px; padding-inline: 11px; font-size: 9px; }
  .hero-hed,
  .hero h1,
  .blog-index-hero h1,
  .article-hero h1,
  .tool-site h1,
  .planner-site h1,
  .projection-site h1,
  .directory-site h1 { font-size: clamp(38px,11.5vw,52px); line-height: 1; }
  .sec-title,
  .section h2,
  .blog-list-head h2,
  .tool-site h2,
  .planner-site h2,
  .projection-site h2,
  .directory-site h2 { font-size: clamp(34px,9.5vw,48px); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; animation: none!important; transition-duration: .01ms!important; }
}