/* Generated from tokens.css and main.css. Regenerate with scripts/retention-navigation-css.cjs. */
/* ============================================================
   Sanor — brand design tokens (locked, from CLAUDE.md)
   Named custom properties for the locked palette. The ported
   component CSS below uses these hex values directly; these
   variables carry the same values for reference and future use.
   ============================================================ */
.sanor-navigation {
  --brand-green:  #0B2F16; /* headings */
  --callout-green: #102F1D; /* shared hero, capabilities and footer Playbook boxes */
  --deep-green:   #0A3D2F; /* dark section backgrounds, accents */
  --article-link-green: #176B42; /* approved Forest text links */
  --bright-green: #96F878; /* CTAs, highlights */
  --cream:        #F7F4EF; /* alternate section backgrounds */
  --cream-border: #E3DFD5; /* card borders on cream */
  --warm-grey:    #C9C4B8; /* muted rules, dividers */
  --ink-brand:    #2B2B2B; /* body text */
  --white:        #FFFFFF; /* base page background */
}

/* ============================================================
   Ported verbatim from reference/sanor-wireframe.html (build 48).
   The .sanor-navigation blocks below reproduce the wireframe's token values
   exactly so component CSS renders pixel-identical.
   ============================================================ */
  .sanor-navigation {
    --bg: #FFFFFF;
    --line: #C7C7C7;
    --line-soft: #E2E2E2;
    --fill: #F2F2F2;
    --fill-dark: #E6E6E6;
    --ink: #2B2B2B;
    --mute: #8A8A8A;
    --note: #6B7B8F;
    --mono: "SF Mono", Menlo, Consolas, monospace;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --serif: "Source Serif 4", Georgia, serif;
  }

.sanor-navigation {
  --content-w: 1350px;
  --byline-font: "Inter", sans-serif;
  --byline-weight: 300;
  /* greyscale placeholders — swap for brand tokens later */
  --ink:          #111111;
  --body:         #333333;
  --meta:         #767676;
  --rule:         #E4E4E4;
  --fill:         #D9D9D9;
  --page:         #FFFFFF;

  /* type */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --size-eyebrow: 15px;
  --size-title:   72px;
  --size-body:    20px;
  --size-btn:     16px;

  /* button */
  --btn-h:        48px;
  --btn-pad:      26px;
  --btn-radius:   14px;
  --btn-weight:   600;
  --arrow-w:      16px;
  --arrow-gap:    10px;
  --swap-dur:     340ms;
  --swap-ease:    cubic-bezier(0.65, 0, 0.35, 1);
}

.sanor-navigation { position:relative; height:82px; background:transparent; color:var(--ink); font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.45; font-variant-numeric:normal; -webkit-font-smoothing:auto; }
.sanor-navigation, .sanor-navigation * { box-sizing:border-box; margin:0; padding:0; }
.sanor-navigation :where(a) { color:inherit; text-decoration:none; }
.nav {position: absolute; top: 0px; left: 0px; right: 0px; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px max(40px, 50% - 675px); background: transparent;}
.nav__logo {width: 110px; height: 30px;}
.nav__links {display: flex; gap: 34px; align-items: center; justify-content: center; font-size: 17px; font-weight: 300; color: rgb(118, 118, 118);}
.nav__cta {justify-self: end;}
.wordmark {font-family: Sora, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.02em; color: rgb(11, 47, 22); cursor: pointer;}
.nav__links a {text-decoration: none; color: var(--ink); cursor: pointer;}
.nav__links a:hover {text-decoration: underline;}
.nav__links > a, .nav__dropdown-trigger {font-weight: 400;}
.nav__item {display: flex; align-items: center;}
.nav__dropdown-trigger {display: inline-flex; align-items: center; gap: 8px;}
.nav__chevron {width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform 180ms;}
.nav-mega {position: fixed; top: 52px; left: 50%; width: min(1120px, -80px + 100vw); padding-top: 24px; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -8px); transition: opacity 180ms, transform 180ms, visibility 180ms;}
.nav__item--research:hover .nav-mega, .nav__item--research:focus-within .nav-mega {opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0px);}
.nav__item--research:hover .nav__chevron, .nav__item--research:focus-within .nav__chevron {transform: translateY(2px) rotate(225deg);}
.nav-mega__panel {background: rgb(255, 255, 255); border: 1px solid rgba(11, 47, 22, 0.1); border-radius: 18px; box-shadow: rgba(11, 47, 22, 0.18) 0px 24px 70px; padding: 30px;}
.nav-mega__head {padding: 0px 4px 22px; border-bottom: 1px solid var(--line-soft);}
.nav-mega__eyebrow {display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgb(10, 61, 47); margin-bottom: 5px;}
.nav-mega__head p {font-family: var(--font-sans); font-size: 15px; font-weight: 300; line-height: 1.45; color: rgb(85, 85, 85);}
.nav__links .nav-mega__all {color: rgb(10, 61, 47); font-size: 14px; font-weight: 600; white-space: nowrap;}
.nav-mega__grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 20px;}
.nav-mega__footer {display: flex; justify-content: flex-end; margin-top: 12px; padding: 20px 4px 0px; border-top: 1px solid var(--line-soft);}
.nav__links .nav-mega__category {display: flex; flex-direction: column; gap: 7px; min-height: 126px; padding: 18px; border-radius: 12px; color: var(--ink); transition: background 160ms, transform 160ms;}
.nav__links .nav-mega__category:hover, .nav__links .nav-mega__category:focus {background: rgb(233, 247, 239); text-decoration: none; transform: translateY(-2px); outline: none;}
.nav-mega__title {display: flex; align-items: flex-start; gap: 9px;}
.nav-mega__icon {display: block; flex: 0 0 19px; width: 19px; height: 19px; color: rgb(10, 61, 47); margin-top: 1px;}
.nav-mega__name {font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; color: rgb(11, 47, 22);}
.nav-mega__description {font-family: var(--font-sans); font-size: 13px; font-weight: 300; line-height: 1.45; color: rgb(85, 85, 85);}
.cta {display: inline-flex; align-items: center; height: var(--btn-h); padding: 0 var(--btn-pad); border: 0px; border-radius: var(--btn-radius); background: var(--fill); color: rgb(11, 47, 22); font-family: var(--font-sans); font-size: var(--size-btn); font-weight: var(--btn-weight); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; text-decoration: none; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;}
.cta:focus-visible {outline: 2px solid var(--ink); outline-offset: 3px;}
.cta:active {transform: translateY(1px);}
.cta__label {white-space: nowrap;}
.cta__slot {flex: 0 0 auto; display: flex; align-items: center; overflow: hidden; width: calc(var(--arrow-w) + var(--arrow-gap)); transition: width var(--swap-dur) var(--swap-ease);}
.cta__slot--lead {justify-content: flex-start; width: 0px;}
.cta__slot--trail {justify-content: flex-end;}
.cta__slot svg {width: var(--arrow-w); height: auto; flex: 0 0 auto; display: block; transition: transform var(--swap-dur) var(--swap-ease),
              opacity calc(var(--swap-dur) * 0.6) linear;}
.cta__slot--lead svg {opacity: 0; transform: translateX(-13px);}
.cta:hover .cta__slot--lead, .cta:focus-visible .cta__slot--lead {width: calc(var(--arrow-w) + var(--arrow-gap));}
.cta:hover .cta__slot--lead svg, .cta:focus-visible .cta__slot--lead svg {opacity: 1; transform: translateX(0px);}
.cta:hover .cta__slot--trail, .cta:focus-visible .cta__slot--trail {width: 0px;}
.cta:hover .cta__slot--trail svg, .cta:focus-visible .cta__slot--trail svg {opacity: 0; transform: translateX(13px);}
@media (prefers-reduced-motion: reduce) {
.cta__slot, .cta__slot svg {transition-duration: 1ms;}
}
.nav__cta .cta {box-shadow: rgb(10, 61, 47) 0px 0px 0px 2px inset; color: rgb(10, 61, 47); background: transparent !important;}
.nav__burger {display: none;}
.mobile-menu {display: none;}
@media (max-width: 800px) {
.nav {grid-template-columns: 44px 1fr 44px; padding: 14px 20px; position: absolute; top: 0px; left: 0px; right: 0px; z-index: 210; background: transparent;}
.nav__links {display: none;}
.nav__burger {display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 30px; height: 30px; background: none; border: 0px; padding: 0px; cursor: pointer; position: relative; z-index: 220;}
.nav__burger span {display: block; width: 26px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 240ms cubic-bezier(0.65, 0, 0.35, 1);}
.nav .wordmark {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.nav__cta {display: none;}
body.menu-open .nav__burger span:nth-child(1) {transform: translateY(4.5px) rotate(45deg);}
body.menu-open .nav__burger span:nth-child(2) {transform: translateY(-4.5px) rotate(-45deg);}
.mobile-menu {display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: 0px; background: rgb(255, 255, 255); z-index: 200; padding: 96px 20px 28px; transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1);}
body.menu-open .mobile-menu {transform: translateX(0px);}
body.menu-open {overflow: hidden;}
.mobile-menu__links {display: flex; flex-direction: column;}
.mobile-menu__links a {font-family: var(--font-sans); font-size: 34px; font-weight: 300; color: var(--ink); text-decoration: none; padding: 14px 0px; cursor: pointer;}
.mobile-menu__cta .cta {--btn-h: 54px;}
}
.nav--light .wordmark, .nav--light .nav__links > a, .nav--light .nav__dropdown-trigger {color: rgb(255, 255, 255);}
.nav--light .nav__cta .cta {box-shadow: rgb(150, 248, 120) 0px 0px 0px 2px inset !important; color: rgb(150, 248, 120) !important;}
.nav--light .nav__burger span {background: rgb(255, 255, 255);}
@media (max-width: 1150px) {
.nav {grid-template-columns: 44px 1fr 44px; padding: 14px 20px; z-index: 210;}
.nav__links {display: none;}
.nav__cta {display: none;}
.nav__burger {display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 30px; height: 30px; background: none; border: 0px; padding: 0px; cursor: pointer; position: relative; z-index: 220;}
.nav__burger span {display: block; width: 26px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 240ms cubic-bezier(0.65, 0, 0.35, 1);}
.nav .wordmark {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
body.menu-open .nav__burger span:nth-child(1) {transform: translateY(4.5px) rotate(45deg);}
body.menu-open .nav__burger span:nth-child(2) {transform: translateY(-4.5px) rotate(-45deg);}
.mobile-menu {display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: 0px; background: rgb(255, 255, 255); z-index: 200; padding: 96px 20px 28px; overflow-y: auto; transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1);}
body.menu-open .mobile-menu {transform: translateX(0px);}
body.menu-open {overflow: hidden;}
.mobile-menu__links {display: flex; flex-direction: column;}
.mobile-menu__links > a, .mobile-menu__research > summary {font-family: var(--font-sans); font-size: 34px; font-weight: 400; line-height: 1.2; color: var(--ink); text-decoration: none; padding: 14px 0px; cursor: pointer;}
.mobile-menu__research > summary {display: flex; justify-content: space-between; align-items: center; list-style: none;}
.mobile-menu__research > summary::-webkit-details-marker {display: none;}
.mobile-menu__research > summary::after {content: "+"; font-size: 28px; font-weight: 300;}
.mobile-menu__research[open] > summary::after {content: "−";}
.mobile-menu__research-links {border-left: 1px solid var(--line-soft); margin: 2px 0px 14px 4px; padding: 2px 0px 4px 16px;}
.mobile-menu__research-links a {display: flex; flex-direction: column; gap: 4px; padding: 11px 0px; text-decoration: none;}
.mobile-menu__research-links .mobile-menu__all {display: block; font-size: 14px; font-weight: 600; color: rgb(10, 61, 47); padding: 8px 0px 12px;}
.mobile-menu__category-heading {display: flex; align-items: flex-start; gap: 9px;}
.mobile-menu__category-icon {display: block; flex: 0 0 18px; width: 18px; height: 18px; color: rgb(10, 61, 47); margin-top: 1px;}
.mobile-menu__category-name {font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; color: rgb(11, 47, 22);}
.mobile-menu__category-description {font-family: var(--font-sans); font-size: 13px; font-weight: 300; line-height: 1.45; color: rgb(85, 85, 85); max-width: 54ch;}
}
@media (prefers-reduced-motion: no-preference) {
.nav .wordmark {background-image: linear-gradient(100deg, currentcolor 0%, currentcolor 43%, rgba(255, 255, 255, 0.95) 50%, currentcolor 57%, currentcolor 100%); background-size: 220% 100%; background-repeat: repeat; background-position: 130% 0px; background-clip: text; -webkit-text-fill-color: transparent; animation: 1.6s cubic-bezier(0.35, 0, 0.25, 1) 0.45s 1 normal both running sanor-logo-shine;}
@keyframes sanor-logo-shine { 
  0% { background-position: 130% 0px; }
  100% { background-position: -80% 0px; }
}
}
.nav-mega {width: min(1240px, -64px + 100vw);}
.nav-mega__panel {padding: 26px; border-radius: 18px; box-shadow: rgba(11, 47, 22, 0.13) 0px 18px 50px;}
.nav-mega__grid--themes {padding: 0px; gap: 12px; grid-template-columns: repeat(3, minmax(0px, 1fr));}
.nav__links .nav-mega__grid--themes .nav-mega__category {padding: 23px 22px; min-height: 166px; background: rgb(247, 244, 239); gap: 14px;}
.nav-mega__grid--themes .nav-mega__title {min-height: 48px; gap: 12px; align-items: flex-start;}
.nav-mega__grid--themes .nav-mega__name {font-size: 22px; line-height: 1.15; max-width: 255px;}
.nav-mega__grid--themes .nav-mega__icon {width: 21px; height: 21px; flex-basis: 21px; margin-top: 2px;}
.nav-mega__description {font-size: 14px; line-height: 1.55; font-weight: 400; color: rgb(88, 99, 89); max-width: 330px;}
.nav-market-label {margin: 27px 10px 8px; font-size: 11px; letter-spacing: 0.11em; color: rgb(104, 116, 106);}
.nav-mega__grid--markets {padding: 0px; gap: 4px; grid-template-columns: repeat(5, minmax(0px, 1fr));}
.nav__links .nav-mega__grid--markets .nav-mega__category {min-height: 64px; padding: 15px 10px; justify-content: center;}
.nav-mega__grid--markets .nav-mega__title {align-items: center; gap: 9px;}
.nav-mega__grid--markets .nav-mega__name {font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1.4;}
.nav-mega__grid--markets .nav-mega__icon {flex-basis: 18px; width: 18px; height: 18px; margin-top: 0px;}
.nav__links .nav-mega__category:hover, .nav__links .nav-mega__category:focus-visible {background: rgb(233, 247, 239); transform: none;}
.nav__links .nav-mega__category:focus-visible {outline: rgb(10, 61, 47) solid 2px; outline-offset: 2px;}
.nav-mega__footer {margin-top: 16px; padding: 18px 10px 0px; justify-content: flex-start;}
.nav__links .nav-mega__all {font-size: 15px; font-weight: 500;}
@media (prefers-reduced-motion: reduce) {
.nav-mega, .nav__links .nav-mega__category {transition: none;}
}
.nav-mega__grid--themes .nav-mega__title {flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0px;}
.nav-mega__grid--themes .nav-mega__icon {width: 24px; height: 24px; flex-basis: 24px; margin: 0px;}
.nav-mega__grid--themes .nav-mega__name {min-height: 51px;}
.nav__links .nav-mega__grid--themes .nav-mega__category {padding: 24px; gap: 14px;}
.mobile-menu__research-links > a:nth-child(-n+3) .mobile-menu__category-heading {flex-direction: column; align-items: flex-start; gap: 12px;}
.nav__monitors {display: inline-flex; align-items: center; gap: 10px;}
.nav__monitor-dot {position: relative; display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: rgb(217, 54, 54);}
.nav__monitor-dot::after {content: ""; position: absolute; inset: 0px; border-radius: inherit; background: inherit; animation: 2s ease-out 0s infinite normal none running monitor-pulse;}
@keyframes monitor-pulse { 
  0% { transform: scale(1); opacity: 0.55; }
  80%, 100% { transform: scale(2.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nav__monitor-dot::after {animation: auto ease 0s 1 normal none running none; opacity: 0;}
}
@media (max-width:1150px) { .sanor-navigation { height:58px; } }