@font-face{font-family:"Bizwolf Body";src:url("assets/BizwolfBody-Regular.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Bizwolf Bold";src:url("assets/Bizwolf-BOLD.ttf") format("truetype");font-weight:700;font-display:block}
*{box-sizing:border-box}
:root{color-scheme:only light;color:#122948;background:#fcf7ed;font:400 16px/1.45 "Bizwolf Body",sans-serif}
body{margin:0;background:#fcf7ed;color:#122948;font-family:"Bizwolf Body",sans-serif}
h1,h2,.pill{font-family:"Bizwolf Bold",sans-serif}
.shell{width:min(91%,1400px);margin-inline:auto}
header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:84px;gap:24px}
.logo{width:clamp(115px,13vw,178px);mix-blend-mode:multiply}
.menu{display:flex;gap:clamp(20px,3vw,48px)}
.menu a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  header .contact:hover>span{animation:header-hop 320ms ease-out}
  @keyframes header-hop{
    0%,100%{translate:0 0}
    45%{translate:0 -7px}
    75%{translate:0 -2px}
  }
}
.menu a:hover,.menu a[aria-current]{text-decoration:underline;text-underline-offset:6px}
@media(max-width:660px){header nav.menu{display:flex}nav.menu span{display:none}}
@media(max-width:660px){header.shell:has(nav){grid-template-columns:1fr auto;gap:4px 12px;padding-block:8px}header.shell nav.menu{grid-column:1/-1;grid-row:2;justify-content:center;transform:none}header.shell:has(nav) .contact{grid-column:2;grid-row:1}}
/* The wordmark starts about 38% down the logo, below the wolf's ears. */
.menu,.contact{transform:translateY(clamp(6px,.68vw,9.4px))}
.contact{grid-column:3;justify-self:end;text-decoration:underline;text-underline-offset:7px}
header:has(.menu) .contact{position:relative;text-decoration:none}
header:has(.menu) .contact::before{content:"";position:absolute;inset:-10px}
header:has(.menu) .contact>span{pointer-events:none;display:inline-flex;align-items:center;justify-content:center;padding:9px 19px;min-height:42px;border-radius:999px;background:#122948;color:#fcf7ed;text-decoration:none;font:700 16px/1.2 "Bizwolf Bold",Arial,sans-serif}
.hero{text-align:center;padding:clamp(36px,4.5vw,75px) 5% 0}
.kicker{font-size:clamp(16px,1.5vw,22px);margin:0 auto;max-width:760px;text-wrap:balance}
h1,h2{font-weight:700;letter-spacing:-.045em;line-height:.99}
h1{font-size:clamp(46px,7.3vw,112px);margin:24px auto 20px}
.intro{max-width:700px;margin:0 auto;font-size:clamp(17px,1.45vw,22px);text-wrap:pretty}
.pill{display:inline-block;border:1.5px solid;border-radius:100px;font-weight:700;padding:10px 25px;margin-top:24px;font-size:18px}
.team{display:block;width:min(760px,88%);height:auto;margin:26px auto 0}
.consult{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;padding:clamp(34px,5vw,76px) 0}
h2{font-size:clamp(36px,4.1vw,64px);margin:0}
.consult p{max-width:520px;font-size:clamp(17px,1.5vw,22px);margin:0}
@media(max-width:660px){header{min-height:70px}.menu{display:none}.contact{font-size:15px}.hero{padding-top:32px}.team{width:100%;margin:28px auto 0}.consult{grid-template-columns:1fr;gap:18px}.intro{max-width:420px}}


.wolf-mark{position:relative;display:inline-block;width:fit-content;max-width:100%;vertical-align:middle;mix-blend-mode:multiply}
.wolf-mark img{display:block}
.wolf-mark canvas{display:none;pointer-events:none;position:absolute;left:-6%;top:-21.68%;width:24%;height:auto}
.wolf-mark.howling img{clip-path:inset(0 0 0 18%)}
.wolf-mark.howling canvas{display:block}
.site-copyright { padding: 1.5rem 5vw; text-align: center; color: inherit; }
.site-copyright small { font: inherit; font-size: .875rem; }

@media (max-width:660px){
  header.shell:has(nav.menu){row-gap:18px;padding-block:12px 4px}
  header.shell:has(nav.menu) .contact{transform:none}
  header.shell:has(nav.menu) .contact::before{content:none}
  header.shell:has(nav.menu) .contact>span{min-height:44px}
  header.shell nav.menu{gap:4px;flex-wrap:wrap}
  header.shell nav.menu a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding-inline:12px}
}