/* tendl.ai site header. Self-contained: every rule is scoped to .tn-nav, so it can sit on any page
   (Pelican templates, Tailwind pages, the new homepage) without touching the page's own styles.
   Needs Ubuntu (already on every page). The wordmark font is loaded here. */
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/site-assets/fonts/dm-serif-display.woff2) format('woff2')}

.tn-nav{--tn-green:#16A34B;--tn-deep:#0E6B31;--tn-soft:#E0F8DA;--tn-ink:#1A1A1A;--tn-grey:#666;--tn-grey-l:#8A8A86;--tn-hair:#E6E4DC;--tn-warm:#F7F6F2;
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s;font-family:'Ubuntu',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;color:var(--tn-ink)}
.tn-nav *,.tn-nav *::before,.tn-nav *::after{box-sizing:border-box;margin:0;padding:0}
.tn-nav.tn-scrolled{border-color:var(--tn-hair)}
.tn-nav .tn-wrap{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:72px}
.tn-nav .tn-wordmark{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--tn-green);font-size:31px;line-height:1;text-decoration:none}
.tn-nav .tn-menu{display:flex;gap:30px;list-style:none;align-items:center}
.tn-nav .tn-menu > li{position:relative;list-style:none}
.tn-nav .tn-menu > li > a,.tn-nav .tn-menu > li > button{background:none;border:0;cursor:pointer;text-decoration:none;font:400 15px/1.2 'Ubuntu',system-ui,sans-serif;color:var(--tn-grey);display:flex;align-items:center;gap:6px;padding:24px 0;-webkit-appearance:none;appearance:none}
.tn-nav .tn-menu > li > button svg{width:10px;height:10px;transition:transform .2s}
.tn-nav .tn-menu > li:hover > a,.tn-nav .tn-menu > li:hover > button,.tn-nav .tn-menu > li > a.tn-cur{color:var(--tn-ink)}
.tn-nav .tn-menu > li:hover > button svg{transform:rotate(180deg)}

/* dropdowns; each link carries its own hover colour (--hc text, --hb background), as on the live site */
.tn-nav .tn-drop{position:absolute;top:100%;left:-24px;min-width:300px;background:#fff;border:1px solid var(--tn-hair);border-radius:14px;box-shadow:0 18px 48px rgba(20,24,20,.12);padding:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.tn-nav .tn-menu > li:hover .tn-drop,.tn-nav .tn-menu > li:focus-within .tn-drop{opacity:1;visibility:visible;transform:none}
.tn-nav .tn-drop.tn-two{display:grid;grid-template-columns:1fr 1fr;min-width:560px;gap:4px}
.tn-nav .tn-drop.tn-slim{min-width:230px}
.tn-nav .tn-dh{font-size:12.5px;font-weight:500;color:var(--tn-grey-l);padding:8px 12px 4px}
.tn-nav .tn-drop a{display:block;text-decoration:none;padding:9px 12px;border-radius:9px;color:var(--tn-ink);transition:background .15s,color .15s}
.tn-nav .tn-drop a b{display:block;font-size:14.5px;font-weight:500;transition:color .15s}
.tn-nav .tn-drop a span{display:block;font-size:13px;color:var(--tn-grey);margin-top:1px}
.tn-nav .tn-drop a:hover,.tn-nav .tn-drop a:focus-visible{background:var(--hb,#F0FDF4)}
.tn-nav .tn-drop a:hover b,.tn-nav .tn-drop a:focus-visible b{color:var(--hc,#15803D)}
.tn-nav .tn-drop a.tn-cur{background:var(--hb,#F0FDF4)}.tn-nav .tn-drop a.tn-cur b{color:var(--hc,#15803D)}

.tn-nav .tn-right{display:flex;align-items:center;gap:24px}
.tn-nav .tn-login{font-size:15px;color:var(--tn-grey);text-decoration:none}
.tn-nav .tn-login:hover{color:var(--tn-ink)}
.tn-nav .tn-btn{display:inline-flex;align-items:center;gap:10px;background:var(--tn-green);color:#fff;text-decoration:none;font:500 15px/1 'Ubuntu',system-ui,sans-serif;padding:12px 20px;border-radius:999px;white-space:nowrap;border:0;transition:background .2s}
.tn-nav .tn-btn:hover{background:var(--tn-deep);color:#fff}

/* phone and tablet */
.tn-nav .tn-mob,.tn-nav .tn-burger{display:none}
.tn-nav .tn-burger{width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;margin-right:-10px}
.tn-nav .tn-burger i{position:absolute;left:12px;right:12px;height:2px;border-radius:1px;background:var(--tn-ink);transition:transform .3s,top .3s}
.tn-nav .tn-burger i:nth-child(1){top:17px}.tn-nav .tn-burger i:nth-child(2){top:25px}
.tn-nav.tn-open .tn-burger i:nth-child(1){top:21px;transform:rotate(45deg)}.tn-nav.tn-open .tn-burger i:nth-child(2){top:21px;transform:rotate(-45deg)}
@media (max-width:960px){
  .tn-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)}
  .tn-nav .tn-burger{display:block}
  .tn-nav .tn-login{display:none}
  .tn-nav .tn-right{gap:8px}
  .tn-nav .tn-menu{position:fixed;left:0;right:0;top:72px;bottom:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
  .tn-nav.tn-open .tn-menu{opacity:1;visibility:visible;transform:none}
  .tn-nav.tn-open{border-color:var(--tn-hair);background:#fff}
  .tn-nav .tn-menu > li{border-bottom:1px solid var(--tn-hair)}
  .tn-nav .tn-menu > li > a,.tn-nav .tn-menu > li > button{width:100%;justify-content:space-between;padding:18px 0;font-size:18px;font-weight:500;color:var(--tn-ink)}
  .tn-nav .tn-menu > li > button svg{width:14px;height:14px}
  .tn-nav .tn-menu > li:hover > button svg{transform:none}
  .tn-nav .tn-menu > li.tn-on > button svg{transform:rotate(180deg)}
  .tn-nav .tn-drop,.tn-nav .tn-drop.tn-two{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;min-width:0;padding:0 0 14px;display:none;grid-template-columns:1fr}
  .tn-nav .tn-menu > li.tn-on .tn-drop{display:block}
  .tn-nav .tn-dh{padding:8px 0 4px}
  .tn-nav .tn-drop a{padding:10px 12px;margin:0 -12px}
  .tn-nav .tn-mob{display:block}
  .tn-nav .tn-mob-cta{border-bottom:0!important;padding-top:24px}
  .tn-nav .tn-menu > li.tn-mob-cta > a.tn-btn{width:100%;justify-content:center;padding:15px 26px;font-size:16px;background:var(--tn-green);color:#fff;border-radius:999px}
  .tn-nav .tn-menu > li.tn-mob-cta > a.tn-btn:hover{background:var(--tn-deep)}
  .tn-nav .tn-wrap{padding:0 24px}
}
@media (max-width:480px){.tn-nav .tn-wrap{padding:0 16px}.tn-nav .tn-right > .tn-btn{display:none}}
@media (prefers-reduced-motion:reduce){.tn-nav *{transition:none!important}}