/* OurPath shared chrome — header, footer & theme tokens extracted VERBATIM from the
   homepage (index.html) so every generated & legal page uses the exact same nav and
   footer. Variables are namespaced --op-* so they never collide with site.css. */

:root {
        --op-bg: #0a0e0c;
        --op-bg-2: #0d1310;
        --op-panel: rgba(255, 255, 255, 0.035);
        --op-line: rgba(255, 255, 255, 0.09);
        --op-line-2: rgba(255, 255, 255, 0.14);
        --op-ink: #edf3ef;
        --op-ink-mid: #9fb2a8;
        --op-ink-faint: #68796f;
        --op-accent: #5fb89a;
        --op-accent-bright: #8fe7c4;
        --op-accent-deep: #3e8770;
        --op-clay: #e0a468;
        --op-clay-bright: #f3c08a;
        --op-maxw: 1220px;
      }

html[data-theme="light"] {
        --op-bg: #f3f6f0;
        --op-bg-2: #e9efe6;
        --op-panel: rgba(32, 54, 42, 0.045);
        --op-line: rgba(30, 52, 40, 0.11);
        --op-line-2: rgba(30, 52, 40, 0.17);
        --op-ink: #22302a;
        --op-ink-mid: #57685d;
        --op-ink-faint: #8a9b90;
        --op-accent: #3e8770;
        --op-accent-bright: #4fa07f;
        --op-accent-deep: #2c6552;
        --op-clay: #c6823f;
        --op-clay-bright: #d99a5c;
        color-scheme: light;
      }

h1,
      h2,
      h3,
      h4,
      .brand {
        font-family:
          "Bricolage Grotesque",
          "Poppins",
          ui-sans-serif,
          -apple-system,
          "Segoe UI",
          Arial,
          sans-serif;
        font-weight: 700;
      }

.nav {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 70;
      }

.nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 14px auto;
        max-width: var(--op-maxw);
        padding: 11px 14px 11px 18px;
        border-radius: 16px;
        border: 1px solid transparent;
        transition: 0.3s;
      }

.nav.stuck .nav-inner {
        background: rgba(12, 18, 15, 0.72);
        border-color: var(--op-line);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.8);
      }

.brand {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        font-size: 23px;
        letter-spacing: -0.5px;
        color: var(--op-ink);
        text-decoration: none;
      }

.brand .mascot {
        position: static;
        top: auto;
        left: auto;
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        filter: drop-shadow(0 4px 10px rgba(20, 40, 32, 0.22));
        animation: floatbob 3.6s ease-in-out infinite;
      }

.brand .mascot .ripple {
        display: none;
      }

.nav-links {
        display: flex;
        gap: 26px;
      }

.nav-links a {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--op-ink-mid);
        text-decoration: none;
        transition: 0.18s;
      }

.nav-links a:hover {
        color: var(--op-ink);
      }

.nav-drop {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

.nav-trigger {
        font: inherit;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--op-ink-mid);
        background: transparent;
        border: 0;
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        transition: color 0.18s;
      }

.nav-trigger:hover,
      .nav-trigger:focus,
      .nav-trigger:focus-visible,
      .nav-drop.open .nav-trigger {
        color: var(--op-ink);
        background: transparent;
        border: 0;
        box-shadow: none;
        outline: none;
      }

.nav-trigger .caret {
        width: 12px;
        height: 12px;
        flex: none;
        opacity: 0.7;
        transition: transform 0.18s;
      }

.nav-drop.open .nav-trigger .caret {
        transform: rotate(180deg);
      }

.nav-drop::after {
        content: "";
        position: absolute;
        top: 100%;
        left: -12px;
        right: -12px;
        height: 16px;
      }

.nav-panel {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        min-width: 224px;
        list-style: none;
        margin: 0;
        padding: 8px;
        background: var(--op-bg);
        border: 1px solid var(--op-line);
        border-radius: 14px;
        box-shadow: 0 18px 44px -18px rgba(20, 40, 30, 0.28);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
        z-index: 80;
      }

.nav-drop:hover .nav-panel,
      .nav-drop.open .nav-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

.nav-panel a {
        display: block;
        padding: 9px 12px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 500;
        color: var(--op-ink-mid);
        white-space: nowrap;
        transition: background 0.14s, color 0.14s;
      }

.nav-panel a:hover {
        background: var(--op-panel);
        color: var(--op-ink);
      }

.nav-panel a.seeall {
        color: var(--op-accent);
        font-weight: 600;
        border-top: 1px solid var(--op-line);
        margin-top: 4px;
        padding-top: 11px;
      }

/* Active page — dark-green selection in the menu, set by nav-active.js. */
.nav-panel a.active,
      .nav-panel a[aria-current="page"] {
        background: var(--op-accent-deep);
        color: #f2f8f5;
        font-weight: 600;
      }
.nav-panel a.active:hover,
      .nav-panel a[aria-current="page"]:hover {
        background: var(--op-accent-deep);
        color: #ffffff;
      }
.nav-panel a.seeall.active,
      .nav-panel a.seeall[aria-current="page"] {
        color: #f2f8f5;
      }
.nav-links > a.active,
      .nav-links > a[aria-current="page"],
      .nav-drop.is-active .nav-trigger {
        color: var(--op-accent-deep);
        font-weight: 700;
      }

.pill-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        height: 40px;
        font-size: 14px;
        font-weight: 700;
        color: #F1E4C4;
        text-decoration: none;
        padding: 0 20px;
        border-radius: 14px;
        border: 1px solid rgba(201, 168, 106, 0.32);
        background: linear-gradient(145deg, #1E4D3B 0%, #14261E 100%);
        box-shadow: 0 10px 30px -18px rgba(18, 53, 39, 0.5);
        transition: 0.18s;
        position: relative;
        overflow: hidden;
      }
.pill-cta::after {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 40%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
        animation: dlShimmer 5s ease-in-out 1.5s infinite;
        pointer-events: none;
      }
.pill-cta > * { position: relative; z-index: 1; }
@keyframes dlShimmer { 0% { transform: translateX(-150%) skewX(-18deg); } 100% { transform: translateX(350%) skewX(-18deg); } }

.pill-cta:hover {
        transform: translateY(-2px);
        color: #F1E4C4;
        box-shadow: 0 20px 42px -18px rgba(201, 168, 106, 0.40);
      }

.mascot {
        position: absolute;
        top: -30px;
        left: -24px;
        width: 82px;
        height: 82px;
        z-index: 6;
        filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.55));
        animation: floatbob 3.2s ease-in-out infinite;
      }

.mascot svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
        transition: transform 0.22s ease-out;
      }

.mascot .eyes {
        transition: transform 0.16s ease-out;
      }

.mascot .eye {
        transform-box: fill-box;
        transform-origin: center;
        animation: blink 5.2s ease-in-out infinite;
      }

.mascot .eye.e2 {
        animation-delay: 0.03s;
      }

.mascot .ripple circle {
        transform-box: fill-box;
        transform-origin: center;
        opacity: 0;
        animation: ripple 3.4s ease-out infinite;
      }

.mascot .ripple .r2 {
        animation-delay: 1.13s;
      }

.mascot .ripple .r3 {
        animation-delay: 2.26s;
      }

footer {
        padding: 48px 0 64px;
        margin-top: 24px;
        border-top: 1px solid var(--op-line);
      }

.foot {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
        font-size: 14px;
        color: var(--op-ink-faint);
      }

.foot-cols {
        display: grid;
        grid-template-columns: 1.5fr repeat(4, 1fr);
        gap: 30px 24px;
        margin-bottom: 40px;
        padding-bottom: 34px;
        border-bottom: 1px solid var(--op-line);
      }

.foot-brand .foot-logo {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-weight: 800;
        font-size: 18px;
        color: var(--op-ink);
        letter-spacing: -0.01em;
      }

.foot-brand .foot-logo .dot {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        object-fit: contain;
        display: block;
      }

.foot-brand p {
        color: var(--op-ink-faint);
        font-size: 13.5px;
        line-height: 1.6;
        max-width: 30ch;
        margin: 12px 0 0;
      }

.foot-col h4 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--op-ink-faint);
        margin: 0 0 13px;
      }

.foot-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

.foot-col a {
        font-size: 14px;
        font-weight: 500;
      }

footer a {
        color: var(--op-ink-mid);
        text-decoration: none;
      }

footer a:hover {
        color: var(--op-accent-bright);
      }

html[data-theme="light"] .mascot {
        filter: drop-shadow(0 10px 22px rgba(30, 52, 40, 0.26));
      }

html[data-theme="light"] .nav.stuck .nav-inner {
        background: linear-gradient(
          120deg,
          rgba(236, 245, 238, 0.92),
          rgba(220, 238, 225, 0.88) 55%,
          rgba(232, 243, 235, 0.92)
        );
        border-color: rgba(63, 135, 112, 0.16);
        box-shadow: 0 10px 30px -18px rgba(30, 52, 40, 0.26);
      }

.rightset {
        display: flex;
        align-items: center;
        gap: 20px;
      }

.themebtn {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        background: none;
        color: var(--op-ink-mid);
        cursor: pointer;
        transition: 0.18s;
      }

.themebtn:hover {
        color: var(--op-accent);
      }

.themebtn svg {
        width: 20px;
        height: 20px;
        display: block;
      }

.themebtn .sun {
        display: none;
      }

.themebtn .moon {
        display: block;
      }

html[data-theme="light"] .themebtn {
        color: var(--op-accent-deep);
      }

html[data-theme="light"] .themebtn:hover {
        color: var(--op-accent);
      }

html[data-theme="light"] .themebtn .sun {
        display: block;
      }

html[data-theme="light"] .themebtn .moon {
        display: none;
      }

@media (prefers-reduced-motion: reduce) {
.nav-panel,
        .nav-trigger .caret {
          transition: none;
        }
}

@media (max-width: 860px) {
.nav-links {
          display: none;
        }
}

@media (max-width: 640px) {
.mascot {
          width: 78px;
          height: 78px;
          top: -26px;
          left: -12px;
        }
}

@media (max-width: 860px) {
.foot-cols {
          grid-template-columns: 1fr 1fr;
        }
.foot-brand {
          grid-column: 1 / -1;
        }
}

@media (max-width: 520px) {
.foot-cols {
          grid-template-columns: 1fr;
        }
}

@media (max-width: 480px) {
.nav-inner {
          padding: 10px 12px;
          margin: 10px auto;
        }
.brand {
          font-size: 20px;
          gap: 10px;
        }
.brand .mascot {
          width: 38px;
          height: 38px;
        }
.pill-cta {
          padding: 9px 13px;
          font-size: 13px;
        }
}

@media (max-width: 860px) {
.rightset {
          gap: 12px;
        }
}


/* mascot + logo keyframes */
@keyframes floatbob {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-5px);
        }
      }
@keyframes blink {
        0%,
        90%,
        100% {
          transform: scaleY(1);
        }
        94% {
          transform: scaleY(0.1);
        }
        97% {
          transform: scaleY(1);
        }
      }
@keyframes ripple {
        0% {
          transform: scale(1);
          opacity: 0.42;
        }
        100% {
          transform: scale(1.19);
          opacity: 0;
        }
      }
@keyframes sheen {
        0%,
        60% {
          transform: translateX(-120%);
        }
        80%,
        100% {
          transform: translateX(120%);
        }
      }

/* scroll progress bar + sticky-safe overflow (verbatim from homepage) */
html, body { overflow-x: clip; }
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 80;
  background: linear-gradient(90deg, var(--op-accent), var(--op-clay));
  box-shadow: 0 0 12px rgba(95, 184, 154, 0.7);
}