/* Shared footer: big email in an inset dark panel, like the hero */
footer.sfoot{padding:0;position:relative;background:#0f0f0f;color:#fff;overflow:hidden;margin:clamp(64px,8vw,110px) clamp(8px,1.2vw,16px) clamp(8px,1.2vw,16px);border-radius:clamp(20px,2.4vw,32px);font-family:"Open Sauce Sans",system-ui,sans-serif}
.sfoot .sf-in{position:relative;z-index:2;width:calc(min(1280px,100vw) - 2*max(var(--pad,16px),32px));margin:0 auto;padding:clamp(48px,6vw,80px) 0 0}
.sf-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sf-top small{font:500 14px/1.4 "Open Sauce Sans",sans-serif;color:rgba(255,255,255,.55)}
.sf-links{display:flex;gap:8px;flex-wrap:wrap}
.sf-links a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:99px;font:500 14px "Open Sauce Sans",sans-serif;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background .2s,color .2s}
.sf-links a:hover{background:#fff;color:#0f0f0f}
.sf-mail{padding-bottom:clamp(40px,6vw,80px);display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin-top:clamp(28px,4vw,48px)}
.sf-mail a{font:400 clamp(21px,5.4vw,80px)/1 Anton,"Open Sauce Sans",sans-serif;text-transform:uppercase;letter-spacing:0;color:#fff;overflow-wrap:anywhere}
.sf-mail a{white-space:nowrap}
.sf-mail a span{display:inline}
.sf-mail a:hover{opacity:.75}
.sf-copy{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;margin-bottom:10px;border:0;border-radius:99px;background:#fff;color:#0f0f0f;font:600 14px "Open Sauce Sans",sans-serif;cursor:pointer;transition:transform .2s}
.sf-copy:hover{transform:translateY(-2px)}
.sf-copy svg{width:16px;height:16px}
.sf-bot{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;width:calc(min(1280px,100vw) - 2*max(var(--pad,16px),32px));margin:0 auto;padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.12);font:500 13px "Open Sauce Sans",sans-serif;color:rgba(255,255,255,.5)}
.sf-bot a{color:rgba(255,255,255,.75)}
.sf-bot a:hover{color:#fff}
.sf-bot nav{display:flex;gap:20px}
.sf-toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,20px);opacity:0;padding:10px 16px;border-radius:99px;background:#fff;color:#0f0f0f;font:600 14px "Open Sauce Sans",sans-serif;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);transition:opacity .25s,transform .25s;pointer-events:none}
.sf-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:600px){.sf-mail{flex-direction:column;align-items:flex-start}}
/* phones: keep Work and About reachable in the top bar */
@media (max-width:760px){.nav ul{display:flex!important;gap:18px;font-size:14px}.nav ul li:last-child{display:none}.nav .btn{display:none!important}}
/* brand: centred n mark + "Nanuka" in the heading font */
.brand{font:400 22px/1 Anton,"Open Sauce Sans",sans-serif!important;letter-spacing:.01em!important;text-transform:none;gap:10px}
.brand svg{padding:0!important;width:42px!important;height:42px!important;border-radius:50%!important;background:#141414!important}
/* header: identical 8px inset around the logo and the button, on every side */
.nav{padding:8px!important}
.nav .btn{height:42px!important;padding:0 18px!important}