/* Truspond canonical header + footer — SELF-CONTAINED component.
 * Scoped `tsp-` classes with token-with-fallback so it renders identically on
 * any page (pages that link site.css inherit its tokens; others use fallbacks).
 * This is the single source of truth for the site frame during the Level-2 unify. */
:root{
  --tsp-saffron:#DA5324; --tsp-saffron-2:#FF8B5E; --tsp-ink:#221E18;
  --tsp-paper: var(--paper, #FBF8F3);
  --tsp-text:  var(--text, #26315A);
  --tsp-text-2:var(--text-2, #5b647f);
  --tsp-line:  var(--line, #ece7de);
  --tsp-paper-2: var(--paper-2, #f3ede3);
  --tsp-radius:11px;
}

/* ---- Header ---- */
.tsp-hdr{position:sticky;top:0;z-index:60;background:rgba(251,248,243,.86);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--tsp-line);font-family:var(--font-body,"IBM Plex Sans",system-ui,sans-serif)}
.tsp-hdr .tsp-wrap{max-width:1160px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:26px;height:72px}
.tsp-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.tsp-brand .tsp-mk{height:40px;width:auto;display:block;flex:none}
.tsp-brand .tsp-btext{display:flex;flex-direction:column;justify-content:center;line-height:1}
.tsp-brand .tsp-tag{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:8.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--tsp-text-2);margin-top:5px;white-space:nowrap}
.tsp-brand .tsp-wm{font-family:'Bricolage Grotesque',var(--font-display,"Space Grotesk"),system-ui,sans-serif;font-weight:800;font-size:32px;letter-spacing:-1.4px;line-height:1}
.tsp-brand .tsp-wm .w1{color:#9E3410} .tsp-brand .tsp-wm .w2{color:#C24A1E} .tsp-brand .tsp-wm .w3{color:#DA5324}
.tsp-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
/* Top-level items: no filled box — a clean animated underline on hover/active. */
.tsp-nav>a,.tsp-trigger{position:relative;font-size:14px;font-weight:500;color:var(--tsp-text-2);padding:9px 9px;background:none;border:0;text-decoration:none;white-space:nowrap;transition:color .16s}
.tsp-trigger{font-family:var(--font-body,system-ui);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.tsp-trigger svg{width:12px;height:12px;transition:transform .2s}
.tsp-nav>a::after,.tsp-trigger::after{content:"";position:absolute;left:9px;right:9px;bottom:3px;height:2px;border-radius:2px;background:var(--tsp-saffron);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.tsp-group{position:relative}
.tsp-nav>a:hover,.tsp-nav>a[aria-current=page],.tsp-trigger:hover,.tsp-group:hover .tsp-trigger,.tsp-group:focus-within .tsp-trigger,.tsp-group.open .tsp-trigger{color:var(--tsp-ink)}
.tsp-nav>a:hover::after,.tsp-nav>a[aria-current=page]::after,.tsp-trigger:hover::after,.tsp-group:hover .tsp-trigger::after,.tsp-group:focus-within .tsp-trigger::after,.tsp-group.open .tsp-trigger::after{transform:scaleX(1)}
.tsp-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#fff;border:1px solid var(--tsp-line);border-radius:14px;box-shadow:0 18px 46px -18px rgba(34,30,24,.28);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.tsp-group:hover .tsp-menu,.tsp-group:focus-within .tsp-menu,.tsp-group.open .tsp-menu{opacity:1;visibility:visible;transform:none}
.tsp-group.open .tsp-trigger svg{transform:rotate(180deg)}
/* Clickable items: clear link affordance + strong hover (accent bar + sliding arrow). */
.tsp-menu a{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--tsp-ink);padding:9px 12px;border-radius:9px;text-decoration:none;border-left:2px solid transparent;transition:background .13s,color .13s,border-color .13s}
.tsp-menu a::after{content:"\2192";margin-left:auto;padding-left:10px;opacity:0;transform:translateX(-5px);color:var(--tsp-saffron);font-weight:600;transition:opacity .13s,transform .13s}
.tsp-menu a:hover,.tsp-menu a:focus-visible{background:rgba(218,83,36,.07);color:var(--tsp-saffron);border-left-color:var(--tsp-saffron)}
.tsp-menu a:hover::after,.tsp-menu a:focus-visible::after{opacity:1;transform:none}
/* Section labels: clearly NON-clickable, with a hairline divider above each group. */
.tsp-menu .grp{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#9aa1b4;padding:13px 12px 5px;margin-top:6px;border-top:1px solid var(--tsp-line);cursor:default;user-select:none}
.tsp-menu .grp:first-child{border-top:0;margin-top:0;padding-top:4px}
.tsp-try{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tsp-saffron);text-decoration:none;padding:8px 15px;border:1.5px solid rgba(218,83,36,.32);border-radius:999px;white-space:nowrap;transition:background .15s,border-color .15s}
.tsp-try:hover{background:rgba(218,83,36,.07);border-color:var(--tsp-saffron)}
.tsp-dot{width:8px;height:8px;border-radius:50%;background:#e5484d;position:relative;flex:none}
.tsp-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#e5484d;animation:tsp-ping 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes tsp-ping{75%,100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.tsp-dot::after{animation:none}}
.tsp-cta{background:var(--tsp-saffron);color:#fff !important;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .15s,transform .15s}
.tsp-cta:hover{background:#c2461b;transform:translateY(-1px)}
.tsp-toggle{display:none;margin-left:auto;background:none;border:0;color:var(--tsp-ink);cursor:pointer;padding:6px}

/* ---- Footer ---- */
.tsp-foot{background:var(--tsp-ink);color:#cfc9c0;font-family:var(--font-body,system-ui);padding:56px 0 30px;margin-top:80px}
.tsp-foot .tsp-wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.tsp-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px}
.tsp-fbrand .tsp-wm{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:26px;letter-spacing:-1.1px}
.tsp-fbrand .tsp-wm .w1{color:#FF8B5E}.tsp-fbrand .tsp-wm .w2{color:#FF7A42}.tsp-fbrand .tsp-wm .w3{color:#FF6A2E}
.tsp-fbrand p{font-size:13.5px;line-height:1.6;color:#a49d92;margin:14px 0 0;max-width:34ch}
.tsp-fbrand a{color:var(--tsp-saffron-2);text-decoration:none}
.tsp-fcol h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8f887d;margin:0 0 14px}
.tsp-fcol a{display:block;font-size:13.5px;color:#cfc9c0;text-decoration:none;padding:5px 0}
.tsp-fcol a:hover{color:#fff}
.tsp-fbtm{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;color:#8f887d}

/* ---- Mobile ---- */
@media(max-width:860px){
  .tsp-hdr .tsp-wrap{height:62px}
  .tsp-brand .tsp-mk{height:32px}.tsp-brand .tsp-wm{font-size:26px;letter-spacing:-1.1px}.tsp-brand .tsp-tag{display:none}
  .tsp-toggle{display:inline-flex}
  .tsp-nav{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--tsp-paper);border-bottom:1px solid var(--tsp-line);padding:10px 16px 18px;max-height:calc(100vh - 62px);overflow:auto}
  .tsp-nav.open{display:flex}
  .tsp-nav>a,.tsp-trigger{width:100%;justify-content:flex-start;font-size:16px;padding:12px 10px}
  .tsp-nav>a::after,.tsp-trigger::after{display:none}
  .tsp-trigger svg{margin-left:auto}
  .tsp-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--tsp-line);border-radius:0;margin:0 0 6px 10px;padding:0 0 4px;display:none}
  .tsp-group.open .tsp-menu{display:block}
  .tsp-cta{margin-top:10px;text-align:center}
  .tsp-fgrid{grid-template-columns:1fr 1fr;gap:26px}
  .tsp-fbrand{grid-column:1/-1}
}