/* ============================================================
   Inflection LLC — shared site chrome
   Sticky nav, breadcrumb, component pager, footer.
   Loaded by every page via /assets/site.css
   ============================================================ */

:root{
  --ink:#0D2B2A; --ink2:#11453E; --teal:#2ABFAA; --lime:#D4E84A;
  --bg:#F2F7F5; --line:#E0EDE9; --muted:#5A7A76; --deep:#0D6B60;
}

/* ---------- Sticky top nav ---------- */
.site-nav{position:sticky;top:0;z-index:1000;background:var(--ink);color:#F2F7F5;
  border-bottom:0;box-shadow:0 1px 0 rgba(0,0,0,.1)}
.site-nav::before{content:'';display:block;height:4px;
  background:linear-gradient(90deg,var(--teal) 60%,var(--lime) 100%)}
.site-nav .inner{max-width:1040px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:16px}
.site-nav .brand{display:inline-flex;align-items:center;font-family:Georgia,'DejaVu Serif',serif;font-size:19px;color:#F2F7F5;
  text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.site-nav .brand .tm{color:var(--teal);font-size:13px}
.site-nav .brand .logo{height:30px;width:auto;display:block}
.site-nav .links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.site-nav .links a{color:#C8E0DA;text-decoration:none;font-size:13.5px;
  padding:7px 12px;border-radius:7px;transition:background .15s,color .15s;white-space:nowrap}
.site-nav .links a:hover{background:rgba(255,255,255,.08);color:#fff}
.site-nav .links a.active{color:var(--ink);background:var(--teal);font-weight:bold}
.site-nav .links a.cta{border:1px solid var(--teal);color:var(--lime)}
.site-nav .links a.cta:hover{background:var(--teal);color:var(--ink)}

/* ---------- Nav dropdown (Services) ---------- */
.site-nav .links .dd{position:relative}
.site-nav .links .dd>.dd-t{color:#C8E0DA;font-size:13.5px;padding:7px 12px;border-radius:7px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s,color .15s;outline:none}
.site-nav .links .dd>.dd-t::after{content:'\25BE';font-size:9px;color:var(--teal)}
.site-nav .links .dd:hover>.dd-t,.site-nav .links .dd:focus-within>.dd-t{background:rgba(255,255,255,.08);color:#fff}
.site-nav .links .dd-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:250px;background:#fff;
  border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 32px rgba(13,43,42,.18);
  padding:6px;display:none;flex-direction:column;gap:2px;z-index:1100}
.site-nav .links .dd:hover .dd-menu,.site-nav .links .dd:focus-within .dd-menu{display:flex}
.site-nav .links .dd-menu a{color:var(--ink);font-size:13px;padding:9px 12px;border-radius:8px;white-space:normal;line-height:1.35}
.site-nav .links .dd-menu a:hover{background:#EFF5F2;color:var(--ink)}
.site-nav .links .dd-menu a .d{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- Breadcrumb ---------- */
.crumb{max-width:1040px;margin:0 auto;padding:11px 28px;font-size:12.5px;color:var(--muted)}
.crumb a{color:var(--deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .sep{margin:0 7px;color:#9FC4BD}
.crumb .here{color:var(--ink)}

/* ---------- Component pager (prev / next) ---------- */
.pager{max-width:880px;margin:34px auto 0;padding:0 40px;
  display:flex;gap:12px;flex-wrap:wrap}
.pager a{flex:1;min-width:220px;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:14px 18px;color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s}
.pager a:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 6px 18px rgba(13,43,42,.08)}
.pager a.next{text-align:right}
.pager .dir{font-size:11px;font-weight:bold;letter-spacing:.12em;text-transform:uppercase;color:var(--deep)}
.pager .ti{font-family:Georgia,serif;font-size:15.5px;display:block;margin-top:3px}

/* back-to actions row */
.backrow{max-width:880px;margin:16px auto 0;padding:0 40px;display:flex;gap:12px;flex-wrap:wrap}
.backrow a{font-size:13px;text-decoration:none;color:var(--deep);border:1px solid var(--line);
  background:#fff;border-radius:8px;padding:9px 14px;transition:background .15s,border-color .15s}
.backrow a:hover{background:#EFF5F2;border-color:var(--teal)}
.backrow a b{font-weight:bold}

/* ---------- Site footer ---------- */
.site-foot{background:var(--ink);color:#C8E0DA;margin-top:48px}
.site-foot .inner{max-width:1040px;margin:0 auto;padding:30px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.site-foot .co{font-family:Georgia,serif;font-size:18px;color:#F2F7F5}
.site-foot .co .pr{display:block;font-size:12px;color:var(--teal);font-family:'Verdana',sans-serif;
  letter-spacing:.04em;margin-top:3px}
.site-foot .meta{font-size:12.5px;color:#9FC4BD;text-align:right}
.site-foot .meta a{color:#C8E0DA;text-decoration:none}
.site-foot .meta a:hover{text-decoration:underline}
.site-foot .fnav{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;justify-content:flex-end}
.site-foot .fnav a{color:#9FC4BD;font-size:12px;text-decoration:none}
.site-foot .fnav a:hover{color:#fff}

/* smooth in-page scrolling with offset for sticky nav */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:74px}

/* back-to-top */
.to-top{position:fixed;right:22px;bottom:22px;z-index:900;background:var(--ink);color:var(--lime);
  width:42px;height:42px;border-radius:50%;display:none;align-items:center;justify-content:center;
  text-decoration:none;font-size:18px;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.to-top.show{display:flex}
.to-top:hover{background:var(--deep)}

@media(max-width:640px){
  .site-nav .inner{flex-direction:column;align-items:flex-start;padding:8px 18px 12px;gap:6px}
  .site-nav .links{gap:2px}
  .site-nav .links a{padding:6px 9px;font-size:12.5px}
  .site-nav .links .dd{width:100%}
  .site-nav .links .dd>.dd-t{padding:6px 9px;font-size:12.5px}
  .site-nav .links .dd>.dd-t::after{content:''}
  .site-nav .links .dd-menu{position:static;display:flex;box-shadow:none;border:none;background:transparent;padding:2px 0 4px 12px;min-width:0}
  .site-nav .links .dd-menu a{color:#C8E0DA;padding:5px 8px;font-size:12.5px}
  .site-nav .links .dd-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
  .site-nav .links .dd-menu a .d{display:none}
  .crumb,.pager,.backrow,.site-foot .inner{padding-left:18px;padding-right:18px}
  .pager a.next{text-align:left}
  .site-foot .inner{flex-direction:column;align-items:flex-start}
  .site-foot .meta,.site-foot .fnav{text-align:left;justify-content:flex-start}
}
@media print{.site-nav,.crumb,.pager,.backrow,.to-top{display:none}}