/* ═══════════════════════════════════════════════════
   shared-encirkl.css — encirkl Design System Core
   Shared across all encirkl-branded pages
   ═══════════════════════════════════════════════════ */

/* Roca Two Regular — self-hosted */
@font-face{
  font-family:'Roca Two';
  src:url('../fonts/RocaTwo-Rg.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
/* Nunito Regular — self-hosted */
@font-face{
  font-family:'Nunito';
  src:url('../fonts/Nunito-Regular.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#0a0f0a;--deep:#0e160e;--carbon:#141e14;--moss:#1e2e1e;
  --forest:#2c5230;--jade:#3d7a42;--mint:#6db870;--sage:#9ec49f;
  --cream:#e8e4d8;--sand:#cdc39e;--amber:#c8a84b;--gold:#e8c96a;
  --white:#f5f2ea;
  --sh:0 8px 40px rgba(0,0,0,.4);--sh2:0 24px 80px rgba(0,0,0,.6);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;background:var(--ink);color:var(--cream);overflow-x:hidden}

/* grain overlay */
body::after{content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:999;opacity:.5}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:900;
  padding:18px 52px;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to bottom,rgba(10,15,10,.95),transparent);
  backdrop-filter:blur(10px)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo-img{height:clamp(80px,10vw,120px);width:auto;object-fit:contain}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-size:16px;font-weight:400;color:var(--sage);
  text-decoration:none;letter-spacing:.04em;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-pill{display:flex;gap:10px}
.np-user{font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;
  color:var(--ink);background:var(--mint);padding:9px 20px;border-radius:2px;
  text-decoration:none;letter-spacing:.06em;transition:background .2s}
.np-user:hover{background:var(--sage)}
.np-partner{font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;
  color:var(--amber);border:1px solid rgba(200,168,75,.4);
  padding:9px 20px;border-radius:2px;text-decoration:none;
  letter-spacing:.06em;transition:all .2s}
.np-partner:hover{border-color:var(--amber);background:rgba(200,168,75,.08)}

/* BUTTONS */
.btn-main{font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--mint);color:var(--ink);
  padding:14px 30px;border-radius:2px;text-decoration:none;transition:all .2s}
.btn-main:hover{background:var(--sage);transform:translateY(-2px)}
.btn-outline{font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:var(--amber);
  padding:14px 30px;border-radius:2px;border:1px solid rgba(200,168,75,.4);
  text-decoration:none;transition:all .2s}
.btn-outline:hover{border-color:var(--amber);background:rgba(200,168,75,.07)}

/* SHARED COMPONENTS */
.sdiv{height:1px;background:linear-gradient(to right,transparent,rgba(109,184,112,.15),transparent);margin:0 52px}
.lbl{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-bottom:16px}
.sh2{font-family:'Roca Two','Nunito',serif;font-weight:800;font-size:clamp(28px,4vw,44px);color:var(--white);line-height:1.05;margin-bottom:10px}
.sb{font-size:16px;font-weight:300;color:var(--sage);line-height:1.7;max-width:560px;margin-bottom:48px}

/* FOOTER */
footer{padding:44px 52px 32px;background:var(--deep);border-top:1px solid rgba(109,184,112,.1);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.f-brand{display:flex;align-items:center;gap:12px}
.footer-logo-img{height:50px;width:auto;object-fit:contain}
.fb-sub{font-size:10px;color:rgba(255,255,255,.3);font-weight:300}
.f-links{display:flex;gap:28px;list-style:none}
.f-links a{font-size:12px;color:rgba(255,255,255,.3);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--sage)}
.f-legal{font-size:11px;color:rgba(255,255,255,.2)}
.f-copy{font-size:11px;color:rgba(255,255,255,.2)}

/* HAMBURGER */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:910}
.hamburger span{display:block;width:24px;height:2px;background:var(--sage);margin:5px 0;
  border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:905;
  background:rgba(10,15,10,.97);backdrop-filter:blur(16px);
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;transition:opacity .3s}
.mobile-menu.open{display:flex;opacity:1}
.mobile-menu a{font-family:'Nunito',sans-serif;font-size:20px;font-weight:500;
  color:var(--cream);text-decoration:none;padding:14px 32px;
  border-radius:8px;transition:all .2s;letter-spacing:.04em}
.mobile-menu a:hover{color:var(--white);background:rgba(109,184,112,.08)}
.mobile-menu .mm-cta{font-size:16px;font-weight:600;color:var(--ink);background:var(--mint);
  padding:12px 28px;border-radius:2px;margin-top:16px;letter-spacing:.06em}
.mobile-menu .mm-cta:hover{background:var(--sage)}
.mobile-menu .mm-partner{font-size:16px;font-weight:600;color:var(--amber);
  border:1px solid rgba(200,168,75,.4);padding:12px 28px;border-radius:2px;
  margin-top:4px;letter-spacing:.06em}

/* RESPONSIVE BASE */
@media(max-width:900px){
  nav{padding:14px 20px}
  .nav-links{display:none}.nav-pill{display:none}.hamburger{display:block}
  footer{flex-direction:column;text-align:center;gap:12px;padding:32px 20px}
  .f-links{flex-wrap:wrap;justify-content:center}
  .sdiv{margin:0 20px}
}