/* ============================================================
   PIPE Shared Header + Footer (loaded on all pages)
   Provides the new-style .hdr and .ft rules without touching
   the page body/typography — designed to layer on top of legacy
   stylesheets (base.css/backgrounds.css/responsive.css) or
   alone with redesign.css.
   Keep in sync with the header/footer blocks in redesign.css.
============================================================ */

:root{
  --pipe-ink:     #0a0a0c;
  --pipe-ink2:    #141418;
  --pipe-ember:   #FF9900;
  --pipe-ember-s: rgba(255,153,0,.55);
  --pipe-ember-g: rgba(255,153,0,.12);
  --pipe-fog:     #b8b8c0;
  --pipe-line-d:  rgba(255,255,255,.08);
  --pipe-f-d: 'Inter Tight',-apple-system,sans-serif;
  --pipe-f-b: 'Manrope',-apple-system,sans-serif;
  --pipe-hh: 72px;
}

/* ---- HEADER ---- */
.hdr{position:fixed;inset:0 0 auto;height:var(--pipe-hh);z-index:100;display:flex;align-items:center;padding:0 48px;background:linear-gradient(180deg,rgba(7,7,10,.65) 0%,rgba(7,7,10,0) 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s;box-sizing:border-box}
.hdr.scrolled{background:rgba(10,10,12,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--pipe-line-d)}
.hdr *,.ft *{box-sizing:border-box}
.hdr__i{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;margin:0 auto;gap:24px}
.hdr__brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.hdr__logo{height:20px;width:auto;display:block;filter:brightness(0) invert(1);margin:0;padding:0}
.hdr .nav{display:flex;gap:28px;font-family:var(--pipe-f-b);font-size:14px;font-weight:500;color:rgba(255,255,255,.75);list-style:none;margin:0;padding:0}
.hdr .nav__a{color:inherit;text-decoration:none;transition:color .2s;white-space:nowrap;font-family:var(--pipe-f-b)}
.hdr .nav__a:hover{color:#fff}
.hdr .hcta{font-family:var(--pipe-f-b);font-weight:600;font-size:13px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.18);padding:10px 18px;border-radius:999px;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap;letter-spacing:.01em;display:inline-flex;align-items:center;gap:6px;line-height:1}
.hdr .hcta:hover{border-color:var(--pipe-ember);color:var(--pipe-ember);background:rgba(255,153,0,.04)}
.hdr .burger{display:none}

@media(max-width:768px){
  .hdr{padding:0 20px}
  .hdr .nav{position:fixed;top:-100vh;left:0;right:0;height:100vh;height:100dvh;flex-direction:column;background:rgba(10,10,12,.97);backdrop-filter:blur(16px);padding:calc(var(--pipe-hh) + 24px) 24px 32px;gap:20px;transition:top .3s cubic-bezier(.4,0,.2,1),opacity .3s;pointer-events:none;opacity:0;border-bottom:1px solid var(--pipe-line-d)}
  .hdr .nav.is-open{top:0;pointer-events:auto;opacity:1}
  .hdr .nav__a{font-size:18px;padding:8px 0;color:#fff}
  .hdr .burger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:101;position:relative}
  .hdr .burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s;display:block}
  .hdr .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hdr .burger.is-open span:nth-child(2){opacity:0}
  .hdr .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hdr .hcta{padding:8px 14px;font-size:12px}
}

/* ---- FOOTER ---- */
.ft{background:#000;padding:40px 48px;border-top:1px solid var(--pipe-line-d);font-family:var(--pipe-f-b)}
.ft-i{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:32px}
.ft-left{display:flex;flex-direction:column;gap:6px}
.ft-brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.ft-logo{height:16px;width:auto;filter:brightness(0) invert(1);opacity:.5;display:block;margin:0;padding:0}
.ft-copy{font-size:.85rem;color:rgba(255,255,255,.3);margin:0}
.ft-credit{font-size:.8rem;color:rgba(255,255,255,.3);margin:0}
.ft-credit a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.ft-credit a:hover{color:var(--pipe-ember)}
.ft-links{display:flex;gap:24px;align-items:center}
.ft-link{font-size:.85rem;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.ft-link:hover{color:#fff}
.ft-tg{font-family:var(--pipe-f-b);font-weight:600;font-size:13px;color:#1a0f00;background:var(--pipe-ember);padding:8px 16px;border-radius:999px;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 0 0 0 var(--pipe-ember-g);display:inline-block;line-height:1.2}
.ft-tg:hover{background:#ffaa22;transform:translateY(-1px);box-shadow:0 0 0 5px var(--pipe-ember-g)}

@media(max-width:768px){
  .ft{padding:28px 20px}
  .ft-i{flex-direction:column;text-align:center;gap:20px}
  .ft-left{align-items:center}
  .ft-links{flex-wrap:wrap;justify-content:center}
}